Laden Browser Bilder mit JavaScript-Event?

Question

Ich habe eine Seite bekam viele Bilder enthält, die aus Sicht zunächst versteckt sind, wie ich tabbed divs bin mit (dh versteckt einige divs CSS-Anzeige mit:. Keine).

Wenn also dann Seite geladen wird, es altert nimmt alle Bilder zu laden, das aussieht wie die Seite langsam ist (wie die Ladebalken auf dem Browser nicht abgeschlossen für 10 + Sekunden).

Ich möchte eine Art von nicht laden Bilder, bis sie auf der Seite sichtbar sind.

Ich habe gespielt um mit jQuery LazyLoad , aber dies scheint nur auf Lastbilder, wenn Scrollen Sie den Browser (der für Tabbed divs nicht funktioniert).

Daher ist es eine Möglichkeit, LazyLoad zu arbeiten wie diese zu ändern, oder gibt es einen besseren Weg, dies zu tun?

Danke!

Answer 1

Ich war nicht bewusst, diese vorher, aber LazyLoad tut Unterstützung durch das Auslösen:

http://www.appelsiini.net/projects/lazyload

Wenn jemand eine Hand auf braucht, wie ich das tat, lassen Sie es mich wissen!

Answer 2

Vielleicht jQuery Tabs könnte das tun, was Sie benötigen, mit Ajax-Aufruf auf Registerkarten ...

Wie Sie Ihre verborgenen divs angezeigt werden?

Answer 3

Ein Plan des Angriffs:

Statt die Bild-URL im src-Attribute der img-Tags setzen, setzen Sie es woanders (zB eine versteckte Spanne mit einer bestimmten Klasse darüber), und wenn, welche die div, Iterierte durch all img-Tags und setzen die src an die URL sollte es gehabt haben.

Als Methode ist es auf jeden Fall einige Nachteile bekommt.

Answer 4

Wenn Sie verwenden (oder verwenden), um die HTML5 Doctype, können Sie den „Daten-“ Präfix für Tag-Attribute verwenden:

<img src="" data-src="/path/to/image" style="display: none" />

Und dann können Sie verwenden Sie Javascript um die src mit dem Daten-src zu füllen:

$(SELECTOR).attr("src", $(SELECTOR).attr("data-src"));

Answer 5

Wenn Ihr einziges Ziel zu ‚verstecken‘ ist der Fortschrittsbalken, der so lange dauert, kann aufgrund der großen Anzahl von Bildern, würde ich für eine Art von AJAX-Lösung gehen, da diese Art der Fortschrittsbalken nicht ‚gebraucht‘ . Es ist mehr Komplexität in der Art und Weise einführen Sie Ihre HTML-Elemente laden (und ggf. wann).

Ich persönlich nicht, wie mit Hilfe von HTML-Attribute für etwas anderes als ihren ursprünglichen Zweck, also den Pfad in einem anderen Attribut zu speichern und umzuschalten, wenn nötig wäre nicht meine erste Wahl sein. Stattdessen würde ich versuchen, einen JavaScript-Array (id => Pfad) und aktualisieren Sie die separaten HTML IMG-Elemente zu erstellen, wenn nötig.

Viel Glück! ;)

Answer 6

Ich habe das in letzter Zeit versucht, und muß sagen, dass dies mit js ist nicht mehr möglich. Vielleicht hat es noch nie gewesen ... Projekte wie lazyload haben immer verkündet, dass sie alle Bilder von Laden beim Start stoppen würde, aber man kann in Firebug sehen, dass dies nicht funktioniert. Die Bilder werden sogar zweimal, auf domready geladen und wenn Sie beginnen Scrollen ...

Ihre einzige Wahl auf dem vor Ort sein, Ajax würde oder so etwas wie dies zu tun:

<img src="transparent.gif" alt="" rel="real image source" />

und dann Attribute wechseln, wenn die divs sichtbar werden, so dass das Bild Laden beginnt.

Dies funktioniert auch zumindest wenn man braucht sich nicht Google Indizierung.

Ich hoffe, das hilft! :)

Edit: Hm, warum habe ich eine -1 als ich Givin nur eine Antwort? haben Sie einen Blick auf Seiten mit lazyload und Firebug aktivieren und blättern Sie dann die Seite. Es wurde gesagt, auch hier auf Stackoverflow und in den Kommentaren für die lazyload Plugin, dass dies die einzige Lösung ist im Moment ...: (