logo

  • 欢迎各位友链
  • 本站支持自适应
  • 技术合作请留言

  • 首页
  • 文章 
    • vue
    • app
    • node
    • 生活
    • 小程序
    • javascript
    • uniapp
  • 案例 
    • app
    • 小程序
    • pc
  • 相册
  • 友链
  • 留言
  • 微语
  • 关于

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

 2017-10-05
 椰子皮
 7
 1836
“ 现在在移动设备上浏览网页的人越来越多了,这也是个趋势;这时候优化就显得特别重要。 ”

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


文章页里 的图片都是从编辑器保存下来的,而且现在大部分都是图文结合的文章,所以里面图片路径都是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方法   
});

支付宝 微信
 10

 没有了
 vue中路由切换后点击事件还存在
共有 7 条评论
 发表评论
  • 10001#
    杨子兮
    杨子兮
    •  2019-09-21
    •  云南
    •  Win7
    模板能分享吗,哥哥!
    椰子皮
     椰子皮 2019-09-21 回复 @杨子兮
    不分享的哦。
  • 10002#
    今日头条新闻
    今日头条新闻
    •  2019-09-21
    •  广东佛山
    •  Win7
    文章不错支持一下吧
  • 10003#
    懿古今
    懿古今
    •  2019-09-21
    •  广西南宁
    •  Win7
    现在的我已经不喜欢玩游戏,不过比较喜欢独处一人,安静第看看书,特别是小说。PS:文章字体有点小,看起来有点吃力。
  • 10004#
    iHerb优惠码
    iHerb优惠码
    •  2019-09-21
    •  江苏苏州
    •  Win8
    程序猿啊程序猿
  • 10005#
    历史笔记
    历史笔记
    •  2019-09-21
    •  北京北京
    •  Win8
    哈哈,这个好玩。判断正确率怎么样
  • 10006#
    99八十一
    99八十一
    •  2019-09-21
    •  四川内江
    模板很漂亮,尤其冬季版本,应季啊!
  • 10008#
    钟水洲博客
    钟水洲博客
    •  2019-09-21
    •  江西南昌
    •  Win10
    来踩一踩贵站



表情
 不支持canvas
椰子皮
椰子皮
觉得不错就点个赞吧
 181
 关注 公众号
1288 运行天数
177 今日pv
52 文章数量
 最近更新
 2021-04-08 22:25 更新了 文章
 js查找出现次数最多的字符并统计次数

 最新微语
  • 把清新风格改为毛玻璃效果,虽然有点卡,但 2020-05-31
  • 本站春季主题已完成,大家觉得怎样。 2020-03-15
  • 很久没更新了,不知道说啥,提前祝大家新年 2018-06-05
 最新评论
  • 歌尽花颜
    歌尽花颜 Win10 2021-02-24
    文章 @touchmove.stop.prevent怎么加在根元素上呀?.prevent不是只支持H5的吗?
  • kiinlam
    kiinlam Win10 2021-02-04
    文章 https://ask.dcloud.net.cn/article/36549
  • 小何
    小何 Win10 2021-01-04
    文章 这样取消弹窗了就不是app的正常运行过程了;APP权限拒绝之后怎么让它可以正常进入应用,而不是拒绝了权限就退出应用了
 最多点赞
 最多评论
  • 全新椰子皮博客版本介绍及说明。
    全新椰子皮博客版本介绍及说明。...
    2017-11-23 赞:20
  • vuex action 与mutations 的区别
    vuex action 与mutations 的区别...
    2018-06-24 赞:17
  • vue+typescript使用tinymce富文本编辑器
    vue+typescript使用tinymce富文本编辑...
    2020-06-09 赞:11
  • 让height:auto有过度效果
    让height:auto有过度效果...
    2017-12-22 赞:
  • css3使用transform: scale 元素出现偏移
    css3使用transform: scale 元素出现偏...
    2018-03-10 赞:
  • 结合lazyload实现文章页里面的图片预加载
    结合lazyload实现文章页里面的图片预加载...
    2017-10-05 赞:
 标签
uniapp javascript typescript 小程序 app vue nuxt node
 友情链接
申请
mashihuan Khari & Yaru 美好记忆 帅气的木木 大蒜博客 Aquan 快乐编程 fivewoods Paul 贺德强 太傅博客 梁巨才博客 jielin littlewin IT技术宅
首页 申请友链 关于本站 广告合作
CopyRight © 2016-2020 - 椰子皮 - 浙ICP备16003960号