Maison > interface Web > js tutoriel > Un moyen de charger paresseusement des images avec jquery

Un moyen de charger paresseusement des images avec jquery

小云云
Libérer: 2018-01-17 13:32:37
original
1515 Les gens l'ont consulté

Cet article présente principalement jquery pour implémenter le chargement asynchrone (une méthode de chargement paresseux d'images), qui a une certaine valeur de référence. Les amis intéressés peuvent s'y référer.

Introduisez d'abord le plug-in derrière jq


 (function($) { 
        // alert($.fn.scrollLoading); 
        $.fn.scrollLoading = function(options) { 
          var defaults = { 
            attr: "data-url" 
          }; 
          var params = $.extend({}, defaults, options || {}); 
          params.cache = []; 
          $(this).each(function() { 
            var node = this.nodeName.toLowerCase(), 
              url = $(this).attr(params["attr"]); 
            if(!url) { 
              return; 
            } 
            var data = { 
              obj: $(this), 
              tag: node, 
              url: url 
            }; 
            params.cache.push(data); 
          }); 
 
          var loading = function() { 
            var st = $(window).scrollTop(), 
              sth = st + $(window).height(); 
            $.each(params.cache, function(i, data) { 
              var o = data.obj, 
                tag = data.tag, 
                url = data.url; 
              if(o) { 
                post = o.position().top; 
                posb = post + o.height(); 
                if((post > st && post < sth) || (posb > st && posb < sth)) { 
                  if(tag === "img") { 
                    o.attr("src", url); 
                  } else { 
                    o.load(url); 
                  } 
                  data.obj = null; 
                } 
              } 
            }); 
            return false; 
          }; 
 
          loading(); 
          $(window).bind("scroll", loading); 
        }; 
      })(jQuery);
Copier après la connexion

puis initialisez-le en bas


 $(document).ready(function () { 
    //实现图片慢慢浮现出来的效果 
    $("img").load(function () { 
      //图片默认隐藏  
      $(this).hide(); 
      //使用fadeIn特效  
      $(this).fadeIn("5000"); 
    }); 
    // 异步加载图片,实现逐屏加载图片 
    $(".scrollLoading").scrollLoading();  
  });
Copier après la connexion

Vous devez modifier la balise img en


<img class="scrollLoading" data-url="image/logo.jpg" src="images/load.gif" />
Copier après la connexion

data-url représente l'image à afficher chargé de manière asynchrone, et src représente la première image chargée Image (généralement une petite image ou une animation. Toutes les src de la page Web sont liées à la même image, de sorte que la page Web se charge beaucoup plus rapidement. À ce stade, l'image à charger est chargé de manière asynchrone, c'est la fonction dont je vais parler maintenant)

Recommandations associées :

Explication détaillée du chargement paresseux de l'image imgLazyLoading.js

Utilisation de Js pour implémenter le chargement paresseux et les étapes de mise en œuvre inter-domaines

Introduction à l'implémentation JavaScript du chargement paresseux d'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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal