JQuery Charger toutes les images à l'intérieur de la div avant l'affichage

Je veux charger chaque image à l'intérieur d'un div avant de l'afficher. J'ai quelque chose de similaire à ceci:

<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>

Au début, j'ai essayé de faire des choses comme:

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

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


});

Ou ceci:

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

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

});

Malheureusement, cela n'a pas fonctionné parce qu'une fois que le navigateur charge, même juste une seule image, il déclenche l'événement. Toutes les idées sur la façon de charger tout d'abord ? Merci!

Si vous définissez les dimensions comme ceci: <img width="100" height="100" src="1.jpg" /> le problème est résolu. En php, vous pouvez saisir les dimensions avec php.net/manual/en/function.getimagesize.php

OriginalL'auteur AJ Naidas | 2012-10-10

  1. 7

    Vous pouvez garder une trace de combien d'images ont chargé:

    var $images = $('div img'),
    preloaded = 0,
    total = $images.length;
$images.load(function() {
    if (++preloaded === total) {
        //Done!
    }
});
    Je pense que ce sera un échec si IE8 met en cache les images.
    Oh, c'est un bon point. Je vais le laisser ici au cas où quelqu'un d'autre fait de cette erreur.

    OriginalL'auteur nathan

  2. 1

    Malheureusement, il n'existe pas de moyen facile de le faire dans une de la croix-navigateur compatible. Mais heureusement, il y a 2 plugins qui peuvent la rendre indolore.

    Découvrez waitforimages et imagesloaded

    Alors vous pouvez faire:

    $('div').waitForImages(function(){
  $(this).find('img').show();
});
    Merci pour l'edit @alex. bonne prise.

    OriginalL'auteur Fresheyeball

  4. 0

    Tout d'abord, Le navigateur moderne peut exécuter en même temps que 6 demande => Ne se charge pas, donc beaucoup d'image au moment du chargement. Si vous avez beaucoup d'images, vous pouvez définir des images à l'arrière " src="" " ou non "src" attributs, Et fixé après les premières images chargées

    Seconde, Vous pouvez cocher la case "image a été chargé" en utilisant

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

    Vous pouvez vérifier l'image avec la taille la plus grande ou la dernière image dans les DOM assurez-vous que les autres images ont été chargées.

    Espère qu'il 'll vous aider.

    OriginalL'auteur LogPi

  5. 0

    Cela a fonctionné pour moi:

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

$(window).load(function () {
    $('#div with images').show();
});
    Correct, mais pas pour un div, son pour toutes les images dans la page.

    OriginalL'auteur Reft