Ich möchte jedes Bild in ein div laden, bevor es tatsächlich angezeigt wird. Ich habe etwas Ähnliches:

<div>

<img src="1.jpg" />
<img src="1.jpg" />
<img src="1.jpg" />
<img src="1.jpg" />
<img src="1.jpg" />
<img src="1.jpg" />

</div>

Zuerst habe ich versucht, Dinge zu tun wie:

$('div img').load(function() {

$('div img').show();


});

Oder dieses:

$('div').find('img').load(function() {

$('div img').show();

});

Leider hat dies nicht funktioniert, da der Browser das Ereignis auslöst, sobald er nur ein einziges Bild geladen hat. Irgendwelche Ideen, wie man zuerst alles lädt? Vielen Dank!

4
AJ Naidas 10 Okt. 2012 im 05:54

5 Antworten

Beste Antwort

Sie können verfolgen, wie viele Bilder geladen wurden:

var $images = $('div img'),
    preloaded = 0,
    total = $images.length;
$images.load(function() {
    if (++preloaded === total) {
        // Done!
    }
});
7
nathan 10 Okt. 2012 im 01:58

Erstens kann der moderne Browser 6 Anfragen gleichzeitig ausführen => Laden Sie nicht so viele Bilder zum Ladezeitpunkt. Wenn Sie viele Bilder haben, können Sie die Bilder auf die hinteren Attribute 'src = ""' oder nicht auf "src" setzen und nach den ersten geladenen Bildern festlegen

Zweitens können Sie überprüfen, ob "Bild geladen wurde"

 document.getElementById('#imageId').complete == !0

Sie können mit einem Bild mit der größten Größe oder dem letzten Bild im DOM überprüfen, ob die anderen Bilder geladen wurden.

Hoffe es wird dir helfen.

0
LogPi 20 Jän. 2014 im 14:40

Das hat bei mir funktioniert:

$(document).ready(function () {
    $('#div with images').hide();
});

$(window).load(function () {
    $('#div with images').show();
});
0
Reft 16 Juni 2014 im 23:44

Leider gibt es keine einfache Möglichkeit, dies browserübergreifend zu tun. Aber zum Glück gibt es 2 Plugins, die es schmerzlos machen können.

Überprüfen Sie waitforimages und Bilder geladen

Dann können Sie tun:

$('div').waitForImages(function(){
  $(this).find('img').show();
});
1
alex 23 Jän. 2013 im 22:48

Versuche dies http://chipsandtv.com/articles/jquery-image-preload

0
Tariqulazam 10 Okt. 2012 im 01:57