lazyload懶加載和swiper輪播懶加載的用法

對於有較多的圖片的網頁，使用圖片延遲加載，能有效的提高頁面加載速度，比如商城網頁。

lazyload使用方法：

載入 JavaScript 文件：

<script src="jquery.js"></script>
<script src="jquery.lazyload.js"></script>

修改 HTML 代碼中需要延遲加載的 IMG 標簽：

<!--
將真實圖片地址寫在 data-original 屬性中，而 src 屬性中的圖片換成占位符的圖片（例如 1x1 像素的灰色圖片或者 loading 的 gif 圖片）
添加 class="lazy" 用於區別哪些圖片需要延時加載，當然你也可以換成別的關鍵詞，修改的同時記得修改調用時的 jQuery 選擇器
添加 width 和 height 屬性有助於在圖片未加載時占滿所需要的空間
-->
<img class="lazy" src="grey.gif" data-original="example.jpg" width="640" heigh="480">

調用 Lazy Load：

$('img.lazy').lazyload();

參數參考網址：http://code.ciaoca.com/jquery/lazyload/

Lazy Load遇到的問題：當圖片只指定width而沒有設定height的時候，圖片未加載時的占位是width=height的大小；

 

項目中遇到的問題，當頁面中同時使用swiper插件做圖片輪播的時候，就不能使用Lazy Load來處理輪播的圖片，這時就需要使用swiper的延遲加載參數-lazyLoading：true;

具體使用方法：（http://www.swiper.com.cn/api/Images/2015/0308/213.html）

設為true開啟圖片延遲加載，使preloadImages無效。
需要將圖片img標簽的src改寫成data-src，並且增加類名swiper-lazy。
背景圖的延遲加載則增加屬性data-background（3.0.7開始啟用）。

<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide">
            <img data-src="path/to/picture-1.jpg" class="swiper-lazy">
            <div class="swiper-lazy-preloader"></div>
        </div>
        <div class="swiper-slide">
            <img data-src="path/to/picture-2.jpg" class="swiper-lazy">
            <div class="swiper-lazy-preloader"></div>
        </div>
        <div class="swiper-slide">
            <div data-background="path/to/picture-3.jpg" class="swiper-lazy">slide3</div>
        </div>
    </div>
</div> 
<!-調用->
<script> 
var mySwiper = new Swiper('.swiper-container',{
　　lazyLoading : true,
})
</script>

 swiper lazy遇到的問題：當圖片只指定width而沒有設定height的時候，圖片未加載時的占位是height=0的大小；