Précharger des images est un excellent moyen d'améliorer votre expérience utilisateur. Les images sont préchargées dans le navigateur, et les visiteurs peuvent surfer en douceur sur votre site Web et profiter des vitesses de chargement extrêmement rapides. Ceci est très bénéfique pour les galeries d'images et les sites Web où les images représentent une grande proportion. Il garantit que les images sont publiées rapidement et de manière transparente et peuvent également aider les utilisateurs à obtenir une meilleure expérience utilisateur lors de la navigation sur le contenu de votre site Web. Cet article partagera trois technologies de préchargement différentes pour améliorer les performances et la convivialité du site Web.
Méthode 1: Utilisez CSS et JavaScript pour implémenter le préchargement
Il existe de nombreuses façons d'implémenter des images de préchargement, notamment en utilisant CSS, JavaScript et diverses combinaisons des deux. Ces technologies peuvent concevoir des solutions correspondantes selon différents scénarios de conception, qui sont très efficaces.
L'utilisation de CSS seul peut facilement et efficacement précharge des images, et le code est le suivant:
La copie de code est la suivante:
# preload-01 {background: url (http: //domain.tld/image-01.png) no-repeat -9999px -9999px; }
# preload-02 {background: url (http: //domain.tld/image-02.png) no-repeat -9999px -9999px; }
# preload-03 {background: url (http: //domain.tld/image-03.png) no-repeat -9999px -9999px; }
En appliquant ces trois sélecteurs d'ID à l'élément HTML (x), nous pouvons précharger l'image sur l'arrière-plan hors écran via la propriété d'arrière-plan de CSS. Tant que les chemins de ces images restent les mêmes, le navigateur utilise des images préchargées (cache) pendant le rendu lorsqu'elles sont appelées ailleurs sur la page Web. Simple, efficace et ne nécessite aucun javascript.
Bien que cette méthode soit efficace, il y a place à l'amélioration. Les images chargées à l'aide de cette méthode sont chargées avec d'autres contenus de la page, augmentant 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écharge jusqu'à ce que la page soit chargée. Le code est le suivant:
La copie de code est la suivante:
// meilleure image précharge @ <a href = "http://perishablepress.com/press/2009/12/28/3-ways-preload-images-css-javascript-ajax/"> http://perishablepress.com/press/2009/12/28/3-ways-preload-images-imss-javascript-ajax/ </a> preloader () {
if (document.getElementByid) {
document.getElementById ("Preload-01"). style.background = "url (http: //domain.tld/image-01.png) no-repeat -9999px -9999px";
document.getElementById ("Preload-02"). Style.Background = "URL (http: //domain.tld/image-02.png) No-Repeat -9999px -9999px";
document.getElementById ("Preload-03"). Style.Background = "URL (http: //domain.tld/image-03.png) No-Repeat -9999px -9999px";
}
}
fonction addloadevent (func) {
var oldonload = window.onload;
if (typeof window.onload! = 'function') {
window.onload = func;
} autre {
window.onload = function () {
if (oldonload) {
OldOnload ();
}
func ();
}
}
}
AddLoadevent (préloader);
Dans la première partie du script, nous prenons l'élément à l'aide du sélecteur de classe et définissons la propriété d'arrière-plan pour précharger différentes images.
Dans la deuxième partie de ce script, nous utilisons la fonction addLoadevent () pour retarder le temps de chargement de la fonction préloader () jusqu'à ce que la page soit chargée.
Que se passe-t-il si JavaScript ne fonctionne pas correctement dans le navigateur de l'utilisateur? C'est très simple. L'image ne sera pas préchargée. Lorsque la page appelle l'image, elle s'affiche normalement.
Méthode 2: Utilisez uniquement JavaScript pour implémenter le préchargement
La méthode ci-dessus est parfois très efficace, mais nous constatons progressivement que cela prend trop de temps dans la mise en œuvre réelle. Au lieu de cela, je préfère utiliser Pure JavaScript pour précharger des images. Deux de ces méthodes de préchargement sont fournies ci-dessous, ce qui peut fonctionner à merveille sur tous les navigateurs modernes.
Segment de code JavaScript 1
Il est facile à implémenter en modifiant et en chargeant le chemin et le nom de l'image requise:
La copie de code est la suivante:
<div>
<script type = "text / javascript">
<! - // -> <! [Cdata [//> <! - var images = new Array ()
fonction preload () {
for (i = 0; i <preload.arguments.length; i ++) {
images [i] = nouvelle image ()
images [i] .src = preload.arguments [i]
}
}
Précharge (
"http: //domain.tld/gallery/image-001.jpg",
"http: //domain.tld/gallery/image-002.jpg",
"http: //domain.tld/gallery/image-003.jpg"
)
// -> <!]]> </ script>
</div>
Cette méthode convient particulièrement pour précharger un grand nombre d'images. Mon site Web de galerie utilise cette technologie et a plus de 50 images préchargées. Appliquez le script à la page de connexion, et tant que l'utilisateur entre dans le compte de connexion, la plupart des photos de la galerie seront préchargées.
Extrait javascript 2
Cette méthode est similaire à la méthode ci-dessus et peut également précharger n'importe quel nombre d'images. Ajoutez le script suivant à n'importe quelle page Web et modifiez-le en fonction des instructions du programme.
La copie de code est la suivante:
<div>
<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>
Comme on peut le voir, chaque chargement d'image nécessite de créer une variable, comme "IMG1 = new Image ();" et la déclaration d'adresse source d'image, telle que "img3.src =
"../path/to/image-003.gif"; ". Reportez-vous à ce mode, vous pouvez charger autant d'images que vous le souhaitez.
Nous avons à nouveau amélioré cette méthode. Encapsulez le script dans une fonction et utilisez addLoadevent () pour retarder le temps de précharge jusqu'à ce que la page soit chargée.
La copie de code est la suivante:
fonction preloader () {
if (document.images) {
var img1 = nouvelle image ();
var img2 = nouvelle 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";
}
}
fonction addloadevent (func) {
var oldonload = window.onload;
if (typeof window.onload! = 'function') {
window.onload = func;
} autre {
window.onload = function () {
if (oldonload) {
OldOnload ();
}
func ();
}
}
}
AddLoadevent (préloader);
Méthode 3: Utilisez Ajax pour implémenter le préchargement
La méthode donnée ci-dessus ne semble pas assez cool, alors regardons une méthode qui utilise AJAX pour implémenter le préchargement de l'image. Cette méthode utilise DOM, non seulement précharge des images, mais aussi précharge CSS, JavaScript et d'autres choses connexes. L'utilisation d'Ajax est meilleure que d'utiliser directement JavaScript, l'avantage est que le chargement de JavaScript et CSS n'affectera pas la page actuelle. Cette méthode est simple et efficace.
La copie de code est la suivante:
window.onload = function () {
setTimeout (function () {
// xhr pour demander un js et un css var xhr = nouveau xmlhttprequest ();
xhr.open ('get', 'http: //domain.tld/preload.js');
xhr.send ('');
xhr = new xmlHttpRequest ();
xhr.open ('get', 'http: //domain.tld/preload.css');
xhr.send ('');
// Preload Image New Image (). Src = "http: //domain.tld/preload.png";
}, 1000);
};
Le code ci-dessus est préchargé avec "preload.js", "preload.css" et "preload.png". Le délai d'expiration de 1000 millisecondes est d'empêcher le script de suspendre, ce qui provoque des problèmes fonctionnels sur la page normale.
Ci-dessous, voyons comment implémenter le processus de chargement à l'aide de JavaScript:
La copie de code est la suivante:
window.onload = function () {
setTimeout (function () {
// Référence à <A-head>
var head = document.getElementsByTagName ('head') [0];
// un nouveau CSS
var css = document.createElement ('lien');
css.type = "text / css";
css.rel = "Stylesheet";
css.href = "http: //domain.tld/preload.css";
// un nouveau js
var js = document.createElement ("script");
jsype = "text / javascript";
jsrc = "http: //domain.tld/preload.js";
// Preload JS et CSS Head.ApendChild (CSS);
Head.ApendChild (JS);
// Image de précharge
Nouvelle image (). src = "http: //domain.tld/preload.png";
}, 1000);
};
Ici, nous créons trois éléments via DOM pour implémenter la précharge de trois fichiers. Comme mentionné ci-dessus, avec Ajax, le fichier de chargement n'est pas appliqué à la page de chargement. De ce point de vue, la méthode AJAX est supérieure à JavaScript.
D'accord, cet article sera présenté ici. Tout le monde a déjà compris les trois méthodes de mise en œuvre de la technologie de préchargement de l'image. Lequel est le plus efficace? Je pense que les amis l'ont également vu, alors appliquez-le à leurs propres projets.