加载图像

之前渲染阻止脚本我有以下结构的网页：加载图像

<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

回答

相关问题