網站優化--圖片的預加載與懶加載（上）

時間 2019-11-18
原文原文鏈接
一、延遲加載即懶加載，主要目的是做爲服務器前端的優化，減小請求數或延遲請求數，在一些圖片很是多的網站中很是有用，當圖片位置進入到可視區的時候纔會被加載，這樣對於含有不少 圖片的比較長的網頁來講，能夠加載的更快，而且還能節省服務器帶寬javascript
最經常使用的方式是：監控滾動條的高度，當滾動條高度和可視區高度之和小於圖片位置距離頁面的高度時會被加載css
二、預加載：在查看前面張圖片的時候加載後面的圖片，在提高用戶體驗的同時會增長服務器的壓力html
經常使用方式：建立image對象，經過src屬性加載url資源，當資源加載完成後，資源會被放在緩存中，當再次調用url的時候從緩存中讀取前端
兩種技術的本質：二者的行爲是相反的，一個是提早加載，一個是遲緩甚至不加載。懶加載對服務器前端有必定的緩解壓力做用，預加載則會增長服務器前端壓力java
 
懶加載：web
 
 
 <!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" type="text/css" href="../css/public.css"/>
        <style type="text/css">
            #list{width: 1250px;margin: 100px auto 0;}
            li{float:left;width: 300px;height: 400px;border: 1px solid #999;margin: 10px 0 10px 10px;}
            img{width: 100%;height: 100%;}
        </style>
        <script type="text/javascript" src="../js/rainbow.js"></script>
        <script type="text/javascript">
            window.onload=function(){
                var oUl=document.getElementById("list");
                var aImg=oUl.getElementsByTagName('img');
                function showImg(){
                    for(var i=0;i<aImg.length;i++){
                        var scrollTop=document.documentElement.scrollTop || document.body.scrollTop;
                        //先判斷圖片以前是否被加載，能省去計算高度之和
                        if(!aImg[i].isLoad && getPos(aImg[i]).top<scrollTop +document.documentElement.clientHeight){
                            aImg[i].src=aImg[i].getAttribute('_src');
                            //經過這個自定義屬性設置查看過的圖片不從新加載
                            aImg[i].isLoad=true;
                            //console.log(i);
                        }
                    }
                }
                showImg();
                window.onscroll=function(){
                    showImg();
                }
            }
        </script>
    </head>
    <body>
        <ul id="list">
            <li><img _src="https://img.alicdn.com/bao/uploaded/i1/TB1ULxzOpXXXXX.XVXXSutbFXXX.jpg_240x5000Q75s0.jpg_.webp"/></li>
            <li><img _src="https://img.alicdn.com/bao/uploaded/i1/TB1uf0kOpXXXXbHXVXXSutbFXXX.jpg_240x5000Q75s0.jpg_.webp"/></li>
            <li><img _src="https://img.alicdn.com/bao/uploaded/i1/TB1oJpqOpXXXXa8XVXXSutbFXXX.jpg_240x5000Q75s0.jpg_.webp"/></li>
            <li><img _src="https://img.alicdn.com/bao/uploaded/i1/TB1ombGMVXXXXXQXFXXSutbFXXX.jpg_240x5000Q75s0.jpg_.webp"/></li>
            <li><img _src="https://img.alicdn.com/bao/uploaded/i1/TB1vmzRMVXXXXcSXpXXSutbFXXX.jpg_240x5000Q75s0.jpg_.webp"/></li>
            <li><img _src="https://img.alicdn.com/bao/uploaded/i1/TB1UIhGOpXXXXcOXXXXSutbFXXX.jpg_240x5000Q75s0.jpg_.webp"/></li>
            <li><img _src="https://img.alicdn.com/bao/uploaded/i1/TB1s7DiMVXXXXcbaXXXSutbFXXX.jpg_240x5000Q75s0.jpg_.webp"/></li>
            <li><img _src="https://img.alicdn.com/bao/uploaded/i1/TB1wBlcOpXXXXXTapXXSutbFXXX.jpg_240x5000Q75s0.jpg_.webp"/></li>
            <li><img _src="https://img.alicdn.com/bao/uploaded/i1/TB1ULxzOpXXXXX.XVXXSutbFXXX.jpg_240x5000Q75s0.jpg_.webp"/></li>
            <li><img _src="https://img.alicdn.com/bao/uploaded/i1/TB1uf0kOpXXXXbHXVXXSutbFXXX.jpg_240x5000Q75s0.jpg_.webp"/></li>
            <li><img _src="https://img.alicdn.com/bao/uploaded/i1/TB1oJpqOpXXXXa8XVXXSutbFXXX.jpg_240x5000Q75s0.jpg_.webp"/></li>
            <li><img _src="https://img.alicdn.com/bao/uploaded/i1/TB1ombGMVXXXXXQXFXXSutbFXXX.jpg_240x5000Q75s0.jpg_.webp"/></li>
            <li><img _src="https://img.alicdn.com/bao/uploaded/i1/TB1vmzRMVXXXXcSXpXXSutbFXXX.jpg_240x5000Q75s0.jpg_.webp"/></li>
            <li><img _src="https://img.alicdn.com/bao/uploaded/i1/TB1UIhGOpXXXXcOXXXXSutbFXXX.jpg_240x5000Q75s0.jpg_.webp"/></li>
            <li><img _src="https://img.alicdn.com/bao/uploaded/i1/TB1s7DiMVXXXXcbaXXXSutbFXXX.jpg_240x5000Q75s0.jpg_.webp"/></li>
            <li><img _src="https://img.alicdn.com/bao/uploaded/i1/TB1wBlcOpXXXXXTapXXSutbFXXX.jpg_240x5000Q75s0.jpg_.webp"/></li>
            <li><img _src="https://img.alicdn.com/bao/uploaded/i1/TB1ULxzOpXXXXX.XVXXSutbFXXX.jpg_240x5000Q75s0.jpg_.webp"/></li>
            <li><img _src="https://img.alicdn.com/bao/uploaded/i1/TB1uf0kOpXXXXbHXVXXSutbFXXX.jpg_240x5000Q75s0.jpg_.webp"/></li>
            <li><img _src="https://img.alicdn.com/bao/uploaded/i1/TB1oJpqOpXXXXa8XVXXSutbFXXX.jpg_240x5000Q75s0.jpg_.webp"/></li>
            <li><img _src="https://img.alicdn.com/bao/uploaded/i1/TB1ombGMVXXXXXQXFXXSutbFXXX.jpg_240x5000Q75s0.jpg_.webp"/></li>
            <li><img _src="https://img.alicdn.com/bao/uploaded/i1/TB1vmzRMVXXXXcSXpXXSutbFXXX.jpg_240x5000Q75s0.jpg_.webp"/></li>
            <li><img _src="https://img.alicdn.com/bao/uploaded/i1/TB1UIhGOpXXXXcOXXXXSutbFXXX.jpg_240x5000Q75s0.jpg_.webp"/></li>
            <li><img _src="https://img.alicdn.com/bao/uploaded/i1/TB1s7DiMVXXXXcbaXXXSutbFXXX.jpg_240x5000Q75s0.jpg_.webp"/></li>
            <li><img _src="https://img.alicdn.com/bao/uploaded/i1/TB1wBlcOpXXXXXTapXXSutbFXXX.jpg_240x5000Q75s0.jpg_.webp"/></li>
            <li><img _src="https://img.alicdn.com/bao/uploaded/i1/TB1ULxzOpXXXXX.XVXXSutbFXXX.jpg_240x5000Q75s0.jpg_.webp"/></li>
            <li><img _src="https://img.alicdn.com/bao/uploaded/i1/TB1uf0kOpXXXXbHXVXXSutbFXXX.jpg_240x5000Q75s0.jpg_.webp"/></li>
            <li><img _src="https://img.alicdn.com/bao/uploaded/i1/TB1oJpqOpXXXXa8XVXXSutbFXXX.jpg_240x5000Q75s0.jpg_.webp"/></li>
            <li><img _src="https://img.alicdn.com/bao/uploaded/i1/TB1ombGMVXXXXXQXFXXSutbFXXX.jpg_240x5000Q75s0.jpg_.webp"/></li>
            <li><img _src="https://img.alicdn.com/bao/uploaded/i1/TB1vmzRMVXXXXcSXpXXSutbFXXX.jpg_240x5000Q75s0.jpg_.webp"/></li>
            <li><img _src="https://img.alicdn.com/bao/uploaded/i1/TB1UIhGOpXXXXcOXXXXSutbFXXX.jpg_240x5000Q75s0.jpg_.webp"/></li>
            <li><img _src="https://img.alicdn.com/bao/uploaded/i1/TB1s7DiMVXXXXcbaXXXSutbFXXX.jpg_240x5000Q75s0.jpg_.webp"/></li>
            
        </ul>
    </body>
</html> 
相關標籤/搜索
每日一句
每一个你不满意的现在，都有一个你没有努力的曾经。