Comment jQuery implémente la fonction d'image de préchargement

J'ai récemment utilisé JavaScript pour créer une fonction d'animation. Afin de garantir que l'animation puisse être jouée de manière fluide et fluide, je dois précharger les matériaux d'image utilisés. Permettez-moi de partager avec vous le processus de mise en œuvre de cette fonction

.

Préchargement d'une seule image

La méthode d'implémentation la plus courante à l'heure actuelle est la suivante

function preloadImg(url) {
    var img = new Image();
    img.src = url;
    if(img.complete) {
        //接下来可以使用图片了
        //do something here
    }
    else {
        img.onload = function() {
            //接下来可以使用图片了
            //do something here
        };
    }
}

Instancier d'abord un objet Image Attribuer la valeur à img, puis définissez img.src sur l'adresse de l'image spécifiée par le paramètre url, puis déterminez l'attribut complet de img. S'il existe un cache local de cette image, la valeur est vraie à ce moment-là. exploiter directement cette image.S'il n'y a pas de cache local, la valeur est fausse. À ce stade, nous devons surveiller l'événement onload de img et mettre l'opération sur img dans la fonction de rappel onload. Après le test, cette solution est essentiellement. compatible avec tous les navigateurs actuels

Préchargement d'images multiples

Dans de nombreux scénarios, le préchargement d'une seule image ne peut pas répondre à nos besoins, car des fonctions comme l'animation ont généralement beaucoup de matériaux d'image. Ensuite, nous améliorerons notre fonction basée sur le préchargement d'une image unique d'origine

function preloadImg(list) {
    var imgs = arguments[1] || [],    //用于存储预加载好的图片资源
        fn = arguments.cal    lee;
    if(list.length == 0) {
        return imgs;
    }
    var img = new Image();
    img.src = list[0];
    if(img.complete) {
        imgs.push(img);
        list.shift();
        fn(list, imgs);
    }
    else {
        img.onload = function() {
            imgs.push(img);
            list.shift();
            fn(list, imgs);
        };
    }
}
var list = [......],    //此处省略一万个字符
    imgs = preloadImg();

Parce que l'animation d'image peut devoir garantir l'ordre des images utilisées dans chaque image d'animation, j'utilise donc la récursivité dans ce code. méthode, chargez l'image suivante après le chargement de la précédente. Chaque fois qu'une image est chargée, la ressource d'image est stockée dans le tableau imgs et l'adresse de cette image est supprimée de la liste du tableau d'adresses. dans la liste, sortez de la récursion et renvoyez le tableau imgs

L'idée est belle, la réalité est cruelle, ce code a deux problèmes intolérables

Tout d'abord, je suis très probablement Le Le dernier tableau imgs renvoyé ne peut pas être obtenu, car tant qu'il y a des images qui ne sont pas mises en cache localement, l'opération de stockage des imgs sera placée dans l'événement de rappel onload, et la surveillance des événements est également un type d'opération asynchrone en JavaScript après liaison. l'événement onload Après la fonction de rappel, la fonction preloadImg se termine sans aucune valeur de retour. La valeur reçue par la variable externe imgs n'est pas définie. Ce n'est que lorsque toutes les images ont un cache local que la variable externe imgs peut obtenir avec succès toutes les images préchargées. un tableau de ressources d'images

charge une image avant de charger la suivante. L'ensemble du processus de préchargement des images prendra un temps relativement long, l'expérience utilisateur sera réduite et l'opération asynchrone d'origine est spécifique. cette méthode d'implémentation équivaut à abandonner complètement la fonctionnalité asynchrone de chargement

Préchargement d'images multiples (version améliorée)

Cette fois, nous en ajoutons directement un. Un tableau vide est passé dans le fonction en tant que paramètre, et toutes les images sont stockées dans ce tableau. Voici le code de fonction amélioré (en supposant que nous puissions utiliser jQuery)

function preloadImg(list,imgs) {
    var def = $.Deferred(),
        len = list.length;
    $(list).each(function(i,e) {
        var img = new Image();
        img.src = e;
        if(img.complete) {
            imgs[i] = img;
            len--;
            if(len == 0) {
                def.resolve();
            }
        }
        else {
            img.onload = (function(j) {
                return function() {
                    imgs[j] = img
                    len--;
                    if(len == 0) {
                        def.resolve();
                    }
                };
            })(i);
            img.onerror = function() {
                len--;
                console.log('fail to load image');
            };
        }
    });
    return def.promise();
}
var list = [......],    //此处省略一万个字符
    imgs = [];
$.when(preloadImg(list, imgs)).done(
    function() {
        //预加载结束
        //do something here
    }
);

Lors de la liaison de la fonction de rappel onload à chaque img séparément, la méthode de fermeture est utilisée. pour enregistrer la variable d'incrémentation actuelle i. Si cela n'est pas fait, le résultat sera que les images de l'adresse de liste qui ne sont pas mises en cache localement seront stockées dans le dernier élément de imgs

Chaque fois qu'une image est chargé cette fois, nous ne supprimons pas l'adresse de l'image du tableau de liste, de sorte que lorsque nous aurons besoin d'utiliser les données du tableau de liste plus tard, nous puissions obtenir avec succès

dans ce code, avons-nous introduit. L'objet Deferred de jQuery, qui me permet de mieux comprendre tout le processus de préchargement des images

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!