Chargement paresseux des images et exemples d'utilisation de jquery.lazyload.js

Le chargement paresseux des images est parfois utilisé dans les projets, alors quels sont les avantages du chargement paresseux ?

Je pense qu'il y a deux points principaux. Le premier est que retarder le chargement des images dans de longues pages contenant de nombreuses images volumineuses peut accélérer le chargement des pages ; le second est de contribuer à réduire la charge sur le serveur ;

Ce qui suit présente le plug-in de chargement paresseux jquery.lazyload.js couramment utilisé et comment implémenter un plug-in de chargement paresseux.

1 : plug-in jquery.lazyload.js

lazyload est un plug-in de chargement paresseux écrit par jQuery. Les images en dehors de la zone visible du navigateur ne seront pas chargées tant que le. l'utilisateur fait défiler la page là où il se trouve. C'est exactement le contraire de la façon dont le préchargement de l'image est géré.

Principe de mise en œuvre

Premièrement, l'élément img sélectionné est lié à un événement d'apparition (traitement de l'img pour afficher l'adresse réelle de l'image), afin que l'événement puisse être déclenché lorsque les conditions sont remplies. à l'avenir ;

Il existe une configuration d'attribut de conteneur dans l'objet de configuration, qui est par défaut window. Si l'élément img est dans la fenêtre d'affichage du conteneur, l'événement d'apparition est déclenché ; Afin de déterminer si l'élément img se trouve dans la plage de la fenêtre d'affichage du conteneur, il existe les quatre méthodes suivantes :

$.belowthefold = function(element, settings) {};    // 在视口下方$.rightoffold = function(element, settings) {};        // 在视口右方$.abovethetop = function(element, settings) {};        // 在视口上方$.leftofbegin = function(element, settings) {};        // 在视口左方

Utilisation spécifique

1.

Puisque lazyload repose sur jquery, toutes les pages Vous devez introduire jquery, comme suit :

<script src="jquery.js?1.1.11"></script><script src="jquery.lazyload.js?1.1.11"></script>

Méthode d'écriture de base :

<img class="lazy" data-original="img/example.jpg" width="640" height="480">$(function() {
    $("img.lazy").lazyload();
});

L'attribut data-original stocke le véritable chemin de l'URL de l'image.

Conseils : Vous devez définir la largeur ou la hauteur de l'image en CSS, sinon le plugin risque de ne pas fonctionner correctement.

Définir le seuil

Par défaut, l'image sera chargée lorsqu'elle apparaît à l'écran. Si vous souhaitez charger l'image à l'avance, vous pouvez définir l'option de seuil, définir le. seuil à 200 pour que l'image soit à 200 de l'écran. Les pixels sont chargés à l'avance.

$("img.lazy").lazyload({
    threshold : 200});

Définir l'événement pour déclencher le chargement

L'événement peut être n'importe quel événement jQuery, tel que : clic et survol de la souris. Vous pouvez également utiliser des événements personnalisés, tels que. : sportif et foobar Par défaut, ils attendent que l'utilisateur fasse défiler jusqu'à l'emplacement de l'image dans la fenêtre. Pour empêcher le chargement de l'image jusqu'à ce que l'image d'espace réservé grise soit cliquée, vous pouvez faire ceci :

<.>

Bien sûr, vous pouvez également utiliser la méthode suivante pour implémenter le chargement paresseux :

$("img.lazy").lazyload({
    event : "click"});

C'est-à-dire 5 secondes après le chargement de la page, paresseux le chargement de l’image sera effectué.

$(function() {
    $("img.lazy").lazyload({
        event : "sporty"});
});

$(window).bind("load", function() {var timeout = setTimeout(function() {
        $("img.lazy").trigger("sporty")
    }, 5000);
});

Effet de chargement paresseux

Lorsque l'image est complètement chargée, le plug-in utilise la méthode show() par défaut pour afficher l'image. En fait, vous pouvez utiliser tous les effets spéciaux que vous souhaitez. à traiter. Ci-dessous Le code utilise l'effet FadeIn :

Comment utiliser les navigateurs qui ne prennent pas en charge JavaScript

$("img.lazy").lazyload({
    effect : "fadeIn"});

JavaScript est activé dans presque tous les navigateurs. vous pouvez toujours espérer pouvoir afficher des images réelles sur des clients qui ne prennent pas en charge JavaScript. Pour dégrader correctement lorsque le navigateur ne prend pas en charge JavaScript, vous pouvez écrire le fragment d'image réel dans la balise