首頁  >  文章  >  web前端  >  jquery懶載入圖片一種方式

jquery懶載入圖片一種方式

小云云
小云云原創
2018-01-17 13:32:371480瀏覽

本文主要介紹了jquery實作非同步載入(懶載入圖片一種方式),具有一定的參考價值,有興趣的夥伴們可以參考一下。

首先將外掛程式在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);

然後在底部初始化


# #

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

需要修改img標籤為



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

data-url表示將要異步載入的圖片,src表示首先載入的圖片(一般會是小圖片,或是動畫,網頁中全部的src連結同一個圖片,這樣網頁就載入快好多,這個時候再異步的載入要載入的圖片,也就現在要說的功能)


相關推薦:


圖片懶載入imgLazyLoading.js詳解

用Js實作懶載入和跨域的實作步驟

JavaScript實作圖片的懶載入方法介紹#

以上是jquery懶載入圖片一種方式的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn