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

2017-10-06 07:02
椰子皮
4280
7
11
vue

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

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

 

文章页里 的图片都是从编辑器保存下来的,而且现在大部分都是图文结合的文章,所以里面图片路径都是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方法   
});
支付宝微信
11
关注公众号获取更多内容
vue中路由切换后点击事件还存在
没有了
共有 7 条评论
发表评论
  • 杨子兮#10001
    2019-09-21 19:09
    未知
    Win7

    模板能分享吗,哥哥!

    椰子皮2022-03-27 回复@杨子兮
    不分享的哦。
  • 今日头条新闻#10002
    2019-09-21 19:09
    未知
    Win7

    文章不错支持一下吧

  • 懿古今#10003
    2019-09-21 19:09
    未知
    Win7

    现在的我已经不喜欢玩游戏,不过比较喜欢独处一人,安静第看看书,特别是小说。PS:文章字体有点小,看起来有点吃力。

    椰子皮2022-03-27 回复@懿古今
    确实,忘记调整了
  • iHerb优惠码#10004
    2019-09-21 19:09
    未知
    Win8

    程序猿啊程序猿

  • 历史笔记#10005
    2019-09-21 19:09
    未知
    Win8

    哈哈,这个好玩。判断正确率怎么样

  • 99八十一#10006
    2019-09-21 19:09
    未知
    未知

    模板很漂亮,尤其冬季版本,应季啊!

    椰子皮2022-03-27 回复@99八十一
    感谢支持
  • 钟水洲博客#10008
    2019-09-21 19:09
    未知
    Win10

    来踩一踩贵站

总共 7
  • 1
不支持canvas
春季
夏季
秋季
冬季
暗黑
简约
小清新