Trois méthodes principales pour réaliser le préchargement d'images à l'aide de CSS, JavaScript et Ajax-js tutoriel-php.cn

Le préchargement des images est un excellent moyen d'améliorer l'expérience utilisateur. Avec des images préchargées dans le navigateur, les visiteurs peuvent surfer en douceur sur votre site et profiter de temps de chargement incroyablement rapides. Ceci est très bénéfique pour les galeries d'images et les sites Web où les images occupent une grande proportion. Cela garantit que les images sont publiées rapidement et de manière transparente, et aide également les utilisateurs à bénéficier d'une meilleure expérience utilisateur lorsqu'ils parcourent le contenu de votre site Web. Cet article partagera trois techniques de préchargement différentes pour améliorer les performances et la convivialité du site Web.

Méthode 1 : Utiliser CSS et JavaScript pour implémenter le préchargement

Il existe de nombreuses façons d'implémenter le préchargement des images, notamment en utilisant CSS, JavaScript et diverses combinaisons des deux. Ces technologies peuvent concevoir des solutions correspondantes selon différents scénarios de conception et sont très efficaces.

En utilisant CSS uniquement, vous pouvez précharger les images facilement et efficacement. Le code est le suivant :

#preload-01 { background: url(image-01.png) no-repeat -9999px -9999px; }
#preload-02 { background: url(image-02.png) no-repeat -9999px -9999px; }
#preload-03 { background: url(image-03.png) no-repeat -9999px -9999px; }

Copier après la connexion

Appliquez ces trois sélecteurs d'ID à l'élément (X)HTML, et nous pouvons précharger. images sur un arrière-plan hors écran via la propriété CSS background. Tant que les chemins d'accès à ces images restent les mêmes, le navigateur utilisera les images préchargées (mises en cache) pendant le processus de rendu lorsqu'elles seront appelées ailleurs sur la page Web. Simple, efficace et ne nécessite aucun JavaScript. Bien que cette méthode soit efficace, elle peut encore être améliorée. Les images chargées à l'aide de cette méthode seront chargées avec d'autres contenus sur la page, augmentant ainsi le temps de chargement global de la page. Pour résoudre ce problème, nous avons ajouté du code JavaScript pour retarder le temps de préchargement jusqu'à ce que la page soit chargée. Le code est le suivant :

function preloader() {        if (document.getElementById) {
                document.getElementById("p1").style.background = "url(image-01.png) no-repeat";
                document.getElementById("p2").style.background = "url(image-02.png) no-repeat";
                document.getElementById("p3").style.background = "url(image-03.png) no-repeat";
        }
}function addLoadEvent(func) {        var oldonload = window.onload;        if (typeof window.onload != &#39;function&#39;) {
                window.onload = func;
        } else {
                window.onload = function() {                        if (oldonload) {
                                oldonload();
                        }
                        func();
                }
        }
}
addLoadEvent(preloader);

Copier après la connexion

Dans la première partie du script, nous récupérons l'élément à l'aide du sélecteur de classe et définissons l'attribut background pour qu'il précharge différentes images.

Dans la deuxième partie du script, nous utilisons la fonction addLoadEvent() pour retarder le temps de chargement de la fonction preloader() jusqu'à ce que la page soit chargée.

Que se passe-t-il si JavaScript ne s'exécute pas correctement dans le navigateur de l'utilisateur ? C'est très simple. L'image ne sera pas préchargée. Lorsque la page appellera l'image, elle s'affichera normalement.

Méthode 2 : utiliser JavaScript uniquement pour implémenter le préchargement

La méthode ci-dessus est en effet efficace parfois, mais nous avons progressivement constaté qu'elle prend trop de temps dans le processus de mise en œuvre réel. Au lieu de cela, je préfère utiliser du JavaScript pur pour le préchargement des images. Vous trouverez ci-dessous deux méthodes de préchargement qui fonctionnent à merveille sur tous les navigateurs modernes.

Extrait JavaScript 1

<div class="hidden">
        <script type="text/javascript">
                <!--//--><![CDATA[//><!--                        var images = new Array()                        function preload() {                                for (i = 0; i < preload.arguments.length; i++) {
                                        images[i] = new Image()
                                        images[i].src = preload.arguments[i]                                }
                        }
                        preload(                                "http://domain.tld/gallery/image-001.jpg",                                "http://domain.tld/gallery/image-002.jpg",                                "http://domain.tld/gallery/image-003.jpg"
                        )                //--><!]]>
        </script>
</div>

Copier après la connexion

uniquement Simplement éditez et chargez le chemin et le nom de l'image souhaitée, ce qui est facile à mettre en œuvre :

Cette méthode est particulièrement adaptée au préchargement d'un grand nombre d'images. Le site Web de ma galerie utilise cette technologie pour précharger plus de 50 images. Appliquez ce script à la page de connexion et la plupart des images de la galerie seront préchargées dès que l'utilisateur entrera son identifiant de connexion.

Extrait de code JavaScript 2

<div class="hidden">
        <script type="text/javascript">
                <!--//--><![CDATA[//><!--                        if (document.images) {
                                img1 = new Image();
                                img2 = new Image();
                                img3 = new Image();
                                img1.src = "http://domain.tld/path/to/image-001.gif";
                                img2.src = "http://domain.tld/path/to/image-002.gif";
                                img3.src = "http://domain.tld/path/to/image-003.gif";
                        }                //--><!]]>
        </script>
</div>

Copier après la connexion

Cette méthode est similaire à celle ci-dessus méthode , ou vous pouvez précharger n’importe quel nombre d’images. Ajoutez le script suivant à n'importe quelle page Web et modifiez-le conformément aux instructions du programme.

Comme vous pouvez le voir, chaque fois que vous chargez une image, vous devez créer une variable, telle que "img1 = new Image();", et déclarer l'adresse source de l'image, telle que "img3.src = "../chemin/vers /image-003.gif";". En utilisant ce modèle, vous pouvez charger autant d’images que nécessaire.

Nous avons encore amélioré cette méthode. Enveloppez ce script dans une fonction et utilisez addLoadEvent() pour retarder le temps de préchargement jusqu'à ce que la page soit chargée.

function preloader() {        if (document.images) {                var img1 = new Image();                var img2 = new Image();                var img3 = new Image();
                img1.src = "http://domain.tld/path/to/image-001.gif";
                img2.src = "http://domain.tld/path/to/image-002.gif";
                img3.src = "http://domain.tld/path/to/image-003.gif";
        }
}function addLoadEvent(func) {        var oldonload = window.onload;        if (typeof window.onload != &#39;function&#39;) {
                window.onload = func;
        } else {
                window.onload = function() {                        if (oldonload) {
                                oldonload();
                        }
                        func();
                }
        }
}
addLoadEvent(preloader);

Copier après la connexion

Troisième méthode : utiliser Ajax pour implémenter le préchargement

La méthode donnée ci-dessus ne semble pas assez cool, alors regardons maintenant utiliser Ajax pour implémenter le préchargement d'images méthode. Cette méthode utilise DOM non seulement pour précharger les images, mais également pour précharger CSS, JavaScript et d'autres éléments connexes. L'avantage d'utiliser Ajax par rapport à l'utilisation directe de JavaScript est que le chargement de JavaScript et CSS n'affectera pas la page actuelle. La méthode est simple et efficace.

window.onload = function() {
        setTimeout(function() {                // XHR to request a JS and a CSS                var xhr = new XMLHttpRequest();
                xhr.open(&#39;GET&#39;, &#39;http://domain.tld/preload.js&#39;);
                xhr.send(&#39;&#39;);
                xhr = new XMLHttpRequest();
                xhr.open(&#39;GET&#39;, &#39;http://domain.tld/preload.css&#39;);
                xhr.send(&#39;&#39;);                // preload image                new Image().src = "http://domain.tld/preload.png";
        }, 1000);
};

Copier après la connexion

Le code ci-dessus précharge "preload.js", "preload.css" et " préchargement.png". Le délai d'expiration de 1 000 millisecondes sert à empêcher le script de se bloquer et de provoquer des problèmes fonctionnels avec les pages normales.

Ensuite, voyons comment utiliser JavaScript pour implémenter le processus de chargement :

window.onload = function() {
        setTimeout(function() {                // reference to <head>                var head = document.getElementsByTagName(&#39;head&#39;)[0];                // a new CSS                var css = document.createElement(&#39;link&#39;);
                css.type = "text/css";
                css.rel  = "stylesheet";
                css.href = "http://domain.tld/preload.css";                // a new JS                var js  = document.createElement("script");
                js.type = "text/javascript";
                js.src  = "http://domain.tld/preload.js";                // preload JS and CSS                head.appendChild(css);
                head.appendChild(js);                // preload image                new Image().src = "http://domain.tld/preload.png";
        }, 1000);
};

Copier après la connexion

Ici, nous le créons via DOM Trois éléments pour implémenter le préchargement de trois fichiers. Comme mentionné ci-dessus, avec Ajax, le chargement des fichiers n'est pas appliqué à la page de chargement. De ce point de vue, les méthodes Ajax sont supérieures à JavaScript.