结合lazyload实现文章页里面的图片预加载

现在在移动设备上浏览网页的人越来越多了，这也是个趋势；这时候优化就显得特别重要。

 

文章页里 的图片都是从编辑器保存下来的，而且现在大部分都是图文结合的文章，所以里面图片路径都是src，大家都知道只要src里面这张图

 

片存在就会被加载；如果图片特别多而且又大，这时候对移动流量就特别不友好，刷的一下图片全加载完了。

 

现在介绍的就是利用jquery.lzayload.js做加载，这也做也是为了浏览者如果不想继续看这篇文章，后面的图片是不会被加载的。

 

//这段代码放到网页最底部上面

var infoPicSelector = $(".article-body img"); //图片容器

var infoPicArray = infoPicSelector.not(infoPicSelector.eq(0)).map(function () { 

return $(this).attr("src") }).get().join().split(','); //遍历将里面的所以图片路径存数组

infoPicSelector.not(infoPicSelector.eq(0)).removeAttr("src");//接着就把src给替换掉  
  
$(function () {    
   //遍历每张图片除去第一张，全部设置为data-original
   infoPicSelector.not(infoPicSelector.eq(0)).each(function (i) {    
	  $(this).attr("data-original", infoPicArray[i]);    
	});    
   $(document).find("img").lazyload({ effect: "fadeIn" });//执行lazyload方法   
});