Die beste Methode, Bilder vorab zu laden

8

Wie laden Sie Bilder am besten vor? Ich versuche, eine Bildregisterkarte zu erstellen, die etwa 59 PNG-Bilder enthält. Hier ist der Code, den ich bisher habe:

%Vor%

Die Sache ist jetzt, dass meine Seite eine Weile braucht, um zu laden, und ich kann nicht herausfinden, warum das Klicken auf eine Registerkarte den Iframe langsam zu laden scheint. Werden die Bilder beim Laden des src des iframe erneut geladen? Wäre es besser, die relevanten Bilder onclick zu laden, anstatt sie alle beim Öffnen der Seite zu laden?

Ich fand auch eine gute Alternative in der Form von Lieldulev parallel Lade-Skript (imagesQueue) aber ich weiß nicht, wie man es benutzt.

Übrigens, ich bin nicht sehr versiert in JavaScript, also versuche ich zu lernen, während ich arbeite. Im Moment implementiere ich Techniken, die ich recherchiere und versuche, ihre Funktionen zu verstehen, weshalb meine Programmierung nicht so sauber ist, wie ich es gerne hätte, manchmal sogar nur ineffiziente "rohe Gewalt" verwendend. Codes, um den gewünschten Effekt zu erzielen. Ich würde das jedoch gerne verbessern und jede Hilfe wäre willkommen.

In Bezug auf das parallele Cache-Skript, hier ist eine Testseite, die ich nach Nicks Demo gemustert habe:

%Vor%

Im Moment konnte ich es nicht zum Laufen bringen :( Ich habe das Skript imagesQueue hochgeladen und mit der Seite verknüpft und die Bildwerte von der ursprünglichen Demo-Seite auf die Seite meiner Entwicklungsumgebung gesetzt.

    
Poch 27.05.2011, 09:06
quelle

2 Antworten

0
Leider gibt es auf dieser Seite keine Erklärung wie jQuery Demos. Aber es gibt einen Link, der leicht zu übersehen ist, deshalb poste ich ihn hier für Sie: imageQ-Demo . Wenn Sie den Quellcode lesen, wird die Quelle von imageQ selbst im scripttag im Abschnitt <head></head> verschachtelt. Ich empfehle, dass Sie diesen Quellcode in eine zusätzliche Datei verschieben. Der benutzerdefinierte Code ist im Abschnitt <body></body> geschachtelt. Was Sie suchen, ist

%Vor%

hoffentlich wird es dir helfen.

Übrigens, danke für diesen Link. ;-)

    
reporter 27.05.2011, 09:29
quelle
2

Ihre Idee ist gut, wenn Sie einen fließenden Bildwechsel beim Klicken wünschen. Obwohl Script in reinem Javascript codiert ist (Sie können den convinient Ansatz verwenden: Ссылка ) ) Es sollte keinen so großen Einfluss auf die Leistung haben. Vielleicht liegt der Grund woanders. Vielleicht sind deine Bilder zu schwer ...

Eine andere Lösung neben Javascript ist die Verwendung von reinem CSS-Ansatz und ich nehme an, es wäre viel schneller. Versuchen Sie, alle Bilder auf ein einzelnes PNG zu platzieren, und versuchen Sie in CSS, den Hintergrundpositionswert der einzelnen Registerkarten zu ändern. Zum Beispiel:

%Vor%

Auf diese Weise werden alle Bilder gleichzeitig geladen.

    
Paweł Forys 27.05.2011 09:53
quelle