Charger l'image et faire apparaître en fondu, mais de manière séquentielle.

Question

Je suis en train d'essayer de charger mes images et de les faire apparaître en fondu. Cela fonctionne. Mais supposons que j'ai 4 images. En ce moment, mon script fonctionne en chargeant la dernière image, pas la première. Comment puis-je faire en sorte que mon js charge la première image, et commence à charger la deuxième seulement après que la première ait été chargée?

Voici mon code:

$(function(){
    $("a").click(function(){
        $("#load").load('load.html', function() {
            $('#load img').hide();
            alert($("#load img").length);

            $('#load img').each( function(){
                $(this).on('load', function () {
                    $(this).fadeIn();
                });
            });
        });
        return false;
    });
});

Answer 1

Consultez http://jsfiddle.net/5uNGR/15/

Essayez quelque chose où vous n'essayez pas d'effectuer un fadeIn sur chaque image pendant leur chargement, mais testez la validité de l'image suivante dans votre file d'animation à chaque fois qu'un événement de chargement se produit, puis lors du rappel de l'animation, vérifiez si la suivante est prête. Voici un script qui devrait fonctionner.

À propos, consultez http://www.sajithmr.me/javascript-check-an-image-is-loaded-or-not pour plus d'informations sur le test de préparation des images.

$(function () {
    // fonction utilitaire pour tester si l'image est correctement chargée
    var isImgLoadOk = function (img) {
        if (!img.complete) { return false; }
        if (typeof img.naturalWidth != "undefined" && img.naturalWidth == 0) {
            return false;
        }
        return true;
    };

    $("a").on('click', function () {

        $("#load").load('load.html', function () {

            var imgs = $('#load img').hide(), //créer un tableau d'images et les masquer (enchaînement)
                animIndex = 0, //position dans la file d'animation
                isFading = false; //suivre l'état de savoir si une animation est en cours

            // ceci est un gestionnaire de chargement ET est appelé dans le rappel de fadeIn si 
            // ce n'est pas la dernière image de la collection
            var fadeNextImg = function () {

                // vérifier qu'un événement de chargement ne s'est pas produit au milieu d'une animation
                if (isFading) return;

                // dernière image dans la file d'animation ?
                var isLast = animIndex == imgs.length - 1;

                // obtenir l'image brute de la collection et tester si elle est chargée correctement
                var targetImage = imgs[animIndex];
                if (isImgLoadOk(targetImage)) {
                    // transformer l'htmlImage en objet jQuery
                    targetImage = $(targetImage);

                    // incrémenter la file d'attente
                    animIndex++;

                    // définir l'état de l'animation - cela ignorera les événements de chargement
                    isFading = true;

                    // faire apparaître l'image
                    targetImage.fadeIn('slow', function () {
                        isFading = false;
                        // tester si l'image suivante est prête à être chargée en 
                        // appelant récursivement la fonction parent
                        if (!isLast) fadeNextImg();
                    });

                }
            };

            imgs.on('load', fadeNextImg);

        });

        return false;
    });

});

Answer 2

La solution de Ron est un peu trop compliquée à mon avis. Si votre intention est effectivement de charger toutes les images avant le début de l'animation, vous pourriez faire quelque chose de similaire à ce qui suit:

$(function(){
    $("a").click(function(){
        $("#load").load('load.html', function() {
            $('#load img').hide(); // Je recommanderais d'utiliser du css pour cacher l'image à la place
            alert($("#load img").length);

            $("#load img").each(function(i, image) {
               setTimeout(function() { // Pour chaque image, définissez un délai d'attente de plus en plus long avant le fadeIn
                  $(this).fadeIn();
               }, 2000 * i);
            });
        });
        return false;
    });
});