JS實現圖片懶加載

時間 2019-11-10

原文原文鏈接

JS實現圖片懶加載

懶加載技術

懶加載（LazyLoad）是前端優化的一種有效方式，極大的提高用戶體驗，圖片一直是頁面加載的流浪大戶，如今一張圖片幾兆已是很正常的事，遠遠大於代碼的大小。css

原理：頁面加載後只讓文檔可視區內的圖片顯示，其它不顯示，隨着用戶對頁面的滾動，判斷其區域位置，生成img標籤，讓到可視區的圖片加載出來。html

所用相關技術：給img加屬性 (例如data-src），將圖片的地址賦值給他，這樣就生成img標籤後再把data-src的值賦給img的src（經過dataset.src或者getAttribute('src'),再賦值給img.setAttribute('src')）。前端

jqueryLazyload方式

下載連接：https://pan.baidu.com/s/1gyIzuHPfE7xvztwd8v8qGg 密碼：48kwjquery

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                margin:0px;
                padding: 0;
            }
            .wrap{
                overflow: hidden;
                width:915px;
                background:#2d2d2d;
                margin:50px auto;
                border-radius:10px;
                /*font-size:0px;*/
            }
            .wrap img{
                float:left;    
                display: block;
                width:280px;
                height:180px;
                margin:10px 10px;
                border:2px solid #7c7c7c;
                border-radius:10px;
            }
        </style> 
    </head>
    <body>
        
        <div class="wrap"> 
            <img src="js/images2/1.jpg" />
            <img src="js/images2/2.jpg" />
            <img src="js/images2/3.jpg" />
            <img src="js/images2/4.jpg" />
            <img src="js/images2/5.jpg" />
            <img src="js/images2/6.jpg" />
            <img src="js/images2/7.jpg" />
            <img src="js/images2/1.jpg" />
            <img src="js/images2/2.jpg" />
            <img src="js/images2/3.jpg" />
            <img src="js/images2/4.jpg" />
            <img src="js/images2/5.jpg" />
            <img src="js/images2/6.jpg" />
            <img src="js/images2/7.jpg" />
            <img src="js/images2/1.jpg" />
            <img src="js/images2/2.jpg" />
            <img src="js/images2/3.jpg" />
            <img src="js/images2/4.jpg" />
            <img src="js/images2/5.jpg" />
            <img src="js/images2/6.jpg" />
            <img src="js/images2/7.jpg" />
            <img src="js/images2/1.jpg" />
            <img src="js/images2/2.jpg" />
            <img src="js/images2/3.jpg" />
            <img src="js/images2/4.jpg" />
            <img src="js/images2/5.jpg" />
            <img src="js/images2/6.jpg" />
            <img src="js/images2/7.jpg" />
            <img src="js/images2/1.jpg" />
            <img src="js/images2/2.jpg" />
            <script src="js/jquery-1.11.1.min.js"></script>
            <script src="js/lazyload.js"></script>
            <script>
              $("img").lazyload({
               placeholder :"images2/loading.gif", //用圖片提早佔位
                // placeholder,值爲某一圖片路徑.此圖片用來佔據將要加載的圖片的位置,待圖片加載時,佔位圖則會隱藏
              effect: "fadeIn", // 載入使用何種效果
                // effect(特效),值有show(直接顯示),fadeIn(淡入),slideDown(下拉)等,經常使用fadeIn
              threshold: 200, // 提早開始加載
                // threshold,值爲數字,表明頁面高度.如設置爲200,表示滾動條在離目標位置還有200的高度時就開始加載圖片,能夠作到不讓用戶察覺
             // event: 'click',  // 事件觸發時才加載
                // event,值有click(點擊),mouseover(鼠標劃過),sporty(運動的),foobar(…).能夠實現鼠標莫過或點擊圖片纔開始加載,後兩個值未測試…
              //container: $("#container"),  // 對某容器中的圖片實現效果
                // container,值爲某容器.lazyload默認在拉動瀏覽器滾動條時生效,這個參數可讓你在拉動某DIV的滾動條時依次加載其中的圖片
              //failurelimit : 10 // 圖片排序混亂時
                 // failurelimit,值爲數字.lazyload默認在找到第一張不在可見區域裏的圖片時則再也不繼續加載,但當HTML容器混亂的時候可能出現可見區域內圖片並沒加載出來的狀況,failurelimit意在加載N張可見區域外的圖片,以免出現這個問題.
             });
            </script>
        </div>
    </body>
</html>

echo.js方式

echo.js是一款很是簡單實用輕量級的圖片延時加載插件，若是你的項目中沒有依賴jquery，那麼這將是個不錯的選擇，50行代碼，壓縮後才1k。固然你徹底能夠集成到本身項目中去。git

下載地址：https://github.com/helijun/helijun/tree/master/plugin/echogithub

<style>
　　.demo img { 
　　　　width: 736px; 
　　　　height: 490px; 
　　　　background: url(images/loading.gif) 50% no-repeat;}
</style>

<div class="demo">
    <img class="lazy" src="images/blank.gif" data-echo="images/big-1.jpg">
</div>

<script src="js/echo.min.js"></script>

<script>

Echo.init({
    offset: 0,//離可視區域多少像素的圖片能夠被加載
　　 throttle: 0 //圖片延時多少毫秒加載
}); 

</script>

說明：blank.gif是一張背景圖片，包含在插件裏了。圖片的寬高必須設定，固然，可使用外部樣式對多張圖片統一控制大小。data-echo指向的是真正的圖片地址。瀏覽器

更多閱讀：前端優化

JavaScript如何實現圖片懶加載(lazyload) 提升用戶體驗(加強版)：https://www.jb51.net/article/98692.htmide

前端實現圖片懶加載(lazyload)的兩種方式post

： http://www.javashuo.com/article/p-xmfsirrr-dq.html

js實現圖片懶加載：https://www.jianshu.com/p/4f6ea540516a

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。