圖片預載入，圖片懶載入，和jsonp中的一個疑問

JinsongChai發表於2019-02-16
JSON

之前一直以為圖片預載入，圖片懶載入是差不多的。其實差很多，出發點就不一樣。。。。。下面說一下區別和突然想到的一個問題。
圖片預載入：事先把圖片就下載下來，當下次頁面中需要用到這個圖片的時候，就直接去讀取快取的圖片
具體應用場景：一個輪播圖，每次點選螢幕出現下一張圖片，如果網速不大好的情況下，可能會載入的比較慢。所以會出現螢幕卡頓，白屏等情況。利用圖片預載入將下一張圖片提現快取下來。這樣點選下一張的時候就會讀取快取的圖片，而不是發起一個新的http請求了。
原理

  1. 使用javascript中的 new Image() 建立image物件
  2. 給這個image物件的src屬性賦值，賦值的同時瀏覽器就會請求該圖片資源。
  3. 當點選出先下一張時，如果下一張的src和剛剛的image物件的src值相同，就會去讀取快取。所以更加流暢了。

圖片懶載入：當使用者需要看到這一部分內容的時候才載入圖片
具體應用場景舉例：例如淘寶天貓等商品圖片特別多，第一次開啟頁面的時候不可能把所有商品圖片都載入出來，那樣頁面首屏會特別慢。於是首先只載入使用者能看見的那一部分圖片。如果使用者滑動到下面，則下面的圖片才會載入出來，否則不會載入該圖片。這樣省流量，並且首屏載入比較快。
原理：

  1. 所有的img都自定義一個data-src屬性，名字可以隨便取。這個屬性放著該圖片的地址，而且不給img新增src屬性。因為新增了src屬性即使為空，還是會有請求的。
  2. 當滑動到使用者可以看見的部分之後，將img的data-src屬性值賦值給img的src屬性，這時候img才會去載入圖片資源。

疑問：
上面的圖片預載入中的new 出來的image直接賦值src屬性就能夠載入資源了，可是在jsonp中為什麼還要把script標籤append到頁面中才會發起請求呢？在js中建立的script直接賦值src屬效能不能立即發起請求？測試咯！

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <script type="text/javascript">
        
        window.onload = function(){
            var img = new Image();
            img.src = `./function.JPG`;
            img.onload = function(){
                console.log(`圖片載入完畢`);
            }

            setTimeout(function(){
                console.log(`10秒之後執行`);
                document.getElementsByTagName(`body`)[0].appendChild(img);
            },10000)
            
            /*
                將下面的script標籤的程式碼註釋掉，上面的輸出結果是
                    圖片載入完畢
                    10s之後執行  ---> 這裡等待了10s
            */


            var script = document.createElement(`script`);
            script.src = `./zepto原始碼.js`;
            script.onload = function(){
                console.log(`script載入完畢`);
            }
            setTimeout(function(){
                console.log(`10秒之後執行`);
                document.getElementsByTagName(`body`)[0].appendChild(script);
            },10000)
             /*
                將上面的圖片預載入的程式碼註釋掉，下面的輸出結果是
                    10s之後執行  ---> 這裡等待了10s
                    script載入完畢
            */    
        }
    </script>
</body>
</html>

通過上面的測試，我們發現了使用document.createElement(`script`)建立出來的script標籤給其src賦值之後並沒有立即載入資源。而是等到新增到頁面中才載入資源。 WHY？

相關文章