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标签为

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持考高分网。