结合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的时候执行

 

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