结合swiper使用图片懒加载
记录下笔记,大神勿喷,可以留下优化建议,谢谢
最近刚刚做了个展示型的网站,使用swiper搭的框架,因为图片比较多,所 以首次加载稍微有些慢,虽然压缩过了,但是尽可能的优化吧,刚开始找了个懒加载的一个插件,但没想到怎么跟swiper结合使用,就自己写了个方法,但原理是一样的,就是swiper除了首屏的图片加载以外,其他页面的图片不加载,也就是src属性不给赋值,然后当每次滑动到下一屏的时候图片在加载,可以优化初次加载过慢。
首先,除了首屏的图片正常加载以外,其他页面的img标签正常写入,但不给src赋值,自定义属性data-original=“img/secondPage/2_text.png”,自定义属性的值为你img中src所要加载的图片
<img class="dataImg" data-original="img/secondPage/2_text.png" data-original@2x="img/secondPage/2_text@2x.png" />
当然细心的同学会看到还有个data-original@2x的属性,其实很明显,做适配用的,这个一会在做解释。
然后js定义个函数
这个函数需要传个值,就是swiper下面每页的下标值index,然后循环每页的img,通过attr把data-original的值赋给src,当然你会看到一个判断,也可以看得出是判断设备的像素比的,然后加载不同倍数的图片,这就是上面定义data-original@2x的原因
最后调用,swiper有个方法是onSlideChangeStart,就是改变每一屏的时候执行,
index值可以通过swiper的属性获取,当滑动的时候就可以加载下一屏的图片了,当然首屏的图片是提前加载好的,所以是!0的时候执行
请大神留下宝贵建议,谢谢