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!
5 Antworten
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!
}
});
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.
Das hat bei mir funktioniert:
$(document).ready(function () {
$('#div with images').hide();
});
$(window).load(function () {
$('#div with images').show();
});
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();
});
Versuche dies http://chipsandtv.com/articles/jquery-image-preload