UDN-企业互联网技术人气社区

板块导航

浏览  : 609
回复  : 5

[原生js] 结合swiper使用图片懒加载

[复制链接]
小辫儿的头像 楼主
发表于 2017-2-7 10:55:14 | 显示全部楼层 |阅读模式
  最近刚刚做了个展示型的网站,使用swiper搭的框架,因为图片比较多,所 以首次加载稍微有些慢,虽然压缩过了,但是尽可能的优化吧,刚开始找了个懒加载的一个插件,但没想到怎么跟swiper结合使用,就自己写了个方法,但原理是一样的,就是swiper除了首屏的图片加载以外,其他页面的图片不加载,也就是src属性不给赋值,然后当每次滑动到下一屏的时候图片在加载,可以优化初次加载过慢。

  首先,除了首屏的图片正常加载以外,其他页面的img标签正常写入,但不给src赋值,自定义属性data-original=“img/secondPage/2_text.png”,自定义属性的值为你img中src所要加载的图片
  1. <img class="dataImg" data-original="img/secondPage/2_text.png" data-original@2x="img/secondPage/2_text@2x.png" />
复制代码

  当然细心的同学会看到还有个data-original@2x的属性,其实很明显,做适配用的,这个一会在做解释。

  然后js定义个函数
2.png

  这个函数需要传个值,就是swiper下面每页的下标值index,然后循环每页的img,通过attr把data-original的值赋给src,当然你会看到一个判断,也可以看得出是判断设备的像素比的,然后加载不同倍数的图片,这就是上面定义data-original@2x的原因
 
  最后调用,swiper有个方法是onSlideChangeStart,就是改变每一屏的时候执行,
1.png

  index值可以通过swiper的属性获取,当滑动的时候就可以加载下一屏的图片了,当然首屏的图片是提前加载好的,所以是!0的时候执行

相关帖子

发表于 2017-2-7 10:55:58 | 显示全部楼层
个人觉得js是一种解释性语言,它提供了一个非常方便的开发过程,不需要编译,js与HTML标识结合在一起,从而方便用户的使用操作。
使用道具 举报

回复

发表于 2017-2-7 10:56:00 来自手机 | 显示全部楼层
LZ是闲人,天天发帖,坚定完毕
使用道具 举报

回复

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关于我们
联系我们
  • 电话:010-86393388
  • 邮件:udn@yonyou.com
  • 地址:北京市海淀区北清路68号
移动客户端下载
关注我们
  • 微信公众号:yonyouudn
  • 扫描右侧二维码关注我们
  • 专注企业互联网的技术社区
版权所有:用友网络科技股份有限公司82041 京ICP备05007539号-11 京公网网备安1101080209224 Powered by Discuz!
快速回复 返回列表 返回顶部