加載圖像

之前渲染阻止腳本我有以下結構的網頁：加載圖像

<html> 
    <head> 
    <script type="text/javascript" src="//example.com/s1.min.js"></script> 
    <script type="text/javascript" src="//example.com/s2.min.js"></script> 
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" type="text/javascript"></script> 
    </head> 
    <body> 
    ... template initiation, layout, etc. ... 
    <ul> 
     <li><img src="https://cdn.example.com/img1.jpg"/></li> 
     <li><img src="https://cdn.example.com/img2.jpg"/></li> 
     <li><img src="https://cdn.example.com/img3.jpg"/></li> 
     ... and a lot more images ... 
    </ul> 
    ... a bunch of scripts here ... 
    </body> 
</html>

當我使用Chrome devtool模擬連接速度慢，頁面是空白長達1分鐘，因爲在頭jQuery的劇本阻止DOM。該腳本需要很長時間才能加載，因爲Chrome正在與腳本同時下載圖像，使帶寬飽和。

我不明白這種行爲。我認爲頭部渲染阻塞腳本首先在體內的其他任何東西之前被下載？測試證據證明不是。

我不能輕易地將jquery移動到頁面底部或使其成爲異步，因爲它可能會破壞我不擁有的頁面中的其他腳本。

我已經看到了很多關於刪除渲染攔截腳本的討論。但我的問題更多地是爲什麼渲染阻塞腳本沒有得到「優先」下載？如果有什麼我可以做的，以保證在網絡被圖像下載飽和之前下載的32KB腳本被下載到DOM？

編輯：這是時間線圖。注意如何首先請求jquery，但不阻止圖像。 timeline graph

來源

2017-10-21 Hendrik Poernama

嘗試'onload'事件 –

[腳本已經被加載之前執行的加載的圖像可以開始。]（https://stackoverflow.com/questions/28635141/sequence-in-which-html-page-loads）至少這是瀏覽器應該做的。 –

這裏有一個關於同一主題的討論https://stackoverflow.com/questions/2703468/is-it-possible-to-run-javascript-before-any-image-loads – msoliman

常見的形式給出延遲圖片加載會是這樣的：

$(function(){ 
 
    $('img[data-src]').each(function(){ 
 
    if(!this.src) this.src = this.dataset.src; 
 
    delete this.dataset.src; 
 
    }) 
 
    //just to show the resulting markup, as the image-urls are just placeholder 
 
    console.log($('ul').html()); 
 
})

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" type="text/javascript"></script> 
 
... template initiation, layout, etc. ... 
 
<ul> 
 
    <li><img data-src="https://cdn.example.com/img1.jpg" /></li> 
 
    <li><img data-src="https://cdn.example.com/img2.jpg" /></li> 
 
    <li><img data-src="https://cdn.example.com/img3.jpg" /></li> 
 
    ... and a lot more images ... 
 
</ul>

來源

2017-10-21 07:38:26 Thomas

回答

相關問題