結合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的時候執行

 

 　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　請大神留下寶貴建議，謝謝