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

時間 2019-11-09

標籤圖片加載 jsonp 一個疑問欄目 JSON 简体版

原文原文鏈接

以前一直覺得圖片預加載，圖片懶加載是差很少的。其實差不少，出發點就不同。。。。。下面說一下區別和忽然想到的一個問題。
圖片預加載：事先把圖片就下載下來，當下次頁面中須要用到這個圖片的時候，就直接去讀取緩存的圖片
具體應用場景：一個輪播圖，每次點擊屏幕出現下一張圖片，若是網速不大好的狀況下，可能會加載的比較慢。因此會出現屏幕卡頓，白屏等狀況。利用圖片預加載將下一張圖片提現緩存下來。這樣點擊下一張的時候就會讀取緩存的圖片，而不是發起一個新的http請求了。
原理javascript

使用javascript中的 new Image() 建立image對象
給這個image對象的src屬性賦值，賦值的同時瀏覽器就會請求該圖片資源。
當點擊出先下一張時，若是下一張的src和剛剛的image對象的src值相同，就會去讀取緩存。因此更加流暢了。

圖片懶加載：當用戶須要看到這一部份內容的時候才加載圖片
具體應用場景舉例：例如淘寶天貓等商品圖片特別多，第一次打開頁面的時候不可能把全部商品圖片都加載出來，那樣頁面首屏會特別慢。因而首先只加載用戶能看見的那一部分圖片。若是用戶滑動到下面，則下面的圖片纔會加載出來，不然不會加載該圖片。這樣省流量，而且首屏加載比較快。
原理：html

全部的img都自定義一個data-src屬性，名字能夠隨便取。這個屬性放着該圖片的地址，並且不給img添加src屬性。由於添加了src屬性即便爲空，仍是會有請求的。
當滑動到用戶能夠看見的部分以後，將img的data-src屬性值賦值給img的src屬性，這時候img纔會去加載圖片資源。

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

<!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？json

相關標籤/搜索

每日一句

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