结合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方法 });
9