Eine Möglichkeit, Bilder mit JQuery langsam zu laden

In diesem Artikel wird hauptsächlich JQuery zum Implementieren des asynchronen Ladens (eine Methode zum verzögerten Laden von Bildern) vorgestellt, auf die sich interessierte Freunde beziehen können.

Führen Sie zuerst das Plug-in hinter jq ein

 (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);

und initialisieren Sie es dann unten

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

Sie müssen das img-Tag so ändern, dass

<img class="scrollLoading" data-url="image/logo.jpg" src="images/load.gif" />

data-url das zu erstellende Bild darstellt Wird asynchron geladen, und src stellt das erste geladene Bild dar (normalerweise ein kleines Bild oder eine Animation). Alle src in der Webseite verweisen auf dasselbe Bild, sodass die Webseite viel schneller geladen wird. Zu diesem Zeitpunkt muss das Bild geladen werden wird asynchron geladen, was die Funktion ist, über die ich jetzt sprechen werde)

Verwandte Empfehlungen:

Detaillierte Erklärung des verzögerten Ladens von Bildern imgLazyLoading.js

Verwendung von Js zur Implementierung von verzögertem Laden und domänenübergreifenden Implementierungsschritten

Einführung in die JavaScript-Implementierung des verzögerten Ladens von Bildern

Das obige ist der detaillierte Inhalt vonEine Möglichkeit, Bilder mit JQuery langsam zu laden. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!