结合swiper使用图片懒加载

2018-06-24 00:53:30来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

  记录下笔记,大神勿喷,可以留下优化建议,谢谢

  最近刚刚做了个展示型的网站,使用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的时候执行

 

                                             请大神留下宝贵建议,谢谢

 

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:可控制转速CSS3旋转风车特效

下一篇:前端 PC端兼容性问题总结