jquery懒加载图片一种方式

本文主要介绍了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  st && posb <p>然后在底部初始化<br></p><p class="jb51code"><br></p><pre class="brush:js;"> $(document).ready(function () { 
    //实现图片慢慢浮现出来的效果 
    $("img").load(function () { 
      //图片默认隐藏  
      $(this).hide(); 
      //使用fadeIn特效  
      $(this).fadeIn("5000"); 
    }); 
    // 异步加载图片，实现逐屏加载图片 
    $(".scrollLoading").scrollLoading();  
  });

需要修改img标签为

@@##@@

data-url表示将要异步加载的图片，src表示首先加载的图片（一般会是小图片，或者是一个动画，网页中全部的src链接同一个图片，这样网页就加载快好多，这个时候再异步的加载要加载的图片，也就现在要说的功能）

相关推荐：

图片懒加载imgLazyLoading.js详解

用Js实现懒加载和跨域的实现步骤

JavaScript实现图片的懒加载方法介绍