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

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

文章页里 的图片都是从编辑器保存下来的,而且现在大部分都是图文结合的文章,所以里面图片路径都是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方法   
});