jQuery懶加載插件如何使用

這篇文章主要介紹了jQuery懶加載插件如何使用的相關(guān)知識，內(nèi)容詳細易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇jQuery懶加載插件如何使用文章都會有所收獲，下面我們一起來看看吧。

成都做網(wǎng)站、成都網(wǎng)站建設(shè)、成都外貿(mào)網(wǎng)站建設(shè)的關(guān)注點不是能為您做些什么網(wǎng)站，而是怎么做網(wǎng)站，有沒有做好網(wǎng)站，給創(chuàng)新互聯(lián)公司一個展示的機會來證明自己，這并不會花費您太多時間，或許會給您帶來新的靈感和驚喜。面向用戶友好，注重用戶體驗，一切以用戶為中心。

使用方法

引用jquery和jquery.lazyload.js到你的頁面

        <        script 
        src
        =        "jquery-1.11.0.min.js"
        ></        script
        >        
        <        script 
        src
        =        "jquery.lazyload.js?v=1.9.1"
        ></        script
        >

html圖片調(diào)用方法

為圖片加入樣式lazy 圖片路徑引用方法用data-original

        <
        img 
        class
        =        "lazy" 
        data-original
        =        "img/bmw_m1_hood.jpg"
        >        
        <
        img 
        class
        =        "lazy" 
        data-original
        =        "img/bmw_m1_side.jpg"
        >        
        <
        img 
        class
        =        "lazy" 
        data-original
        =        "img/viper_1.jpg"
        >        
        <
        img 
        class
        =        "lazy" 
        data-original
        =        "img/viper_corner.jpg"
        >
        <
        img 
        class
        =        "lazy" 
        data-original
        =        "img/bmw_m3_gt.jpg"
        >        
        <
        img 
        class
        =        "lazy" 
        data-original
        =        "img/corvette_pitstop.jpg"
        >

js出始化lazyload并設(shè)置圖片顯示方式

        <script type=        "text/javascript" 
        charset=        "utf-8"
        >                  
        $(        function
        () {                      
        $(        "img.lazy"
        ).lazyload({effect: 
        "fadeIn"
        });                  
        });        
        </script>

在圖片中也可以不使用 class="lazy"，初始化時使用：

        $(        "img"
        ).lazyload({effect: 
        "fadeIn"
        });

關(guān)于“jQuery懶加載插件如何使用”這篇文章的內(nèi)容就介紹到這里，感謝各位的閱讀！相信大家對“jQuery懶加載插件如何使用”知識都有一定的了解，大家如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

網(wǎng)頁名稱：jQuery懶加載插件如何使用
當前路徑：http://bm7419.com/article8/ipojop.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站設(shè)計公司、網(wǎng)站營銷、網(wǎng)站導(dǎo)航、網(wǎng)站收錄、外貿(mào)網(wǎng)站建設(shè)、自適應(yīng)網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)