swiper 弹出图片_结合swiper使用图片懒加载

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

最近刚刚做了个展示型的网站，使用swiper搭的框架，因为图片比较多，所 以首次加载稍微有些慢，虽然压缩过了，但是尽可能的优化吧，刚开始找了个懒加载的一个插件，但没想到怎么跟swiper结合使用，就自己写了个方法，但原理是一样的，就是swiper除了首屏的图片加载以外，其他页面的图片不加载，也就是src属性不给赋值，然后当每次滑动到下一屏的时候图片在加载，可以优化初次加载过慢。

首先，除了首屏的图片正常加载以外，其他页面的img标签正常写入，但不给src赋值，自定义属性data-original=“img/secondPage/2_text.png”，自定义属性的值为你img中src所要加载的图片

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

然后js定义个函数

这个函数需要传个值，就是swiper下面每页的下标值index，然后循环每页的img，通过attr把data-original的值赋给src，当然你会看到一个判断，也可以看得出是判断设备的像素比的，然后加载不同倍数的图片，这就是上面定义data-original@2x的原因

最后调用，swiper有个方法是onSlideChangeStart，就是改变每一屏的时候执行，

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

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