Question

我发现了许多使用CSS和JS预加载图像的技术，但是没有一个能够按照我需要的方式真正预加载图像，或者更具体地说按顺序我需要。

简单地说，浏览器会将所有图像和内容预加载到一个块中，但浏览器下载每个图像的顺序完全取决于他自己的计算，主要是（并且完全合理）将首先下载文档中最顶层的元素。

不幸的是，在仅使用<img>元素的测试中，这是完全正确的;对于像背景图像这样的其他元素，即使图像被用作<body>元素的背景，它也不是那样的。

迄今为止唯一能够按照我需要的方式工作的解决方案是在<img>标记之后放置一些<body>元素并将其设置为style="display:none"。 这是有效的，，但相当丑陋和非常粗糙的方式来实现这一目标。

我也有点担心搜索引擎优化，因为机器人会在文档的开头找到一些隐藏的图像，仅仅是为了这个目的（我主要预加载图像，用于预加载器效果，如＆＃34; loading ..＆＃34;带有小徽标图片。）

我非常满意，我看到用这个body:before身上的伪元素预加载图像，然后使用多个背景图像。虽然这种技术确实可以预加载，但它不会影响加载顺序优先级...非常难过它非常完美！：（

更新

正如我在下面的评论中解释的那样，我并不担心以特定的顺序加载图像，我希望它们能够在大部分资产和其他资产之前下载＆＃34;下载＆＃34;中的项目图表，以便在访问页面时，图像几乎立即在浏览器内呈现，同时显示正常的CSS布局呈现。

更新2

更多信息：术语＆＃34; preload＆＃34;确实是误导，我所寻找的更接近的术语可能是＆＃34; prefetch＆＃34;但基本上它是这样的：

大多数浏览器一次并行下载6个请求，从而阻止了其余的下载。如果您真的＆＃34;真的＆＃34;需要在这个前六名中，你很幸运，否则它会在接下来的6中，或者也许在之后等等。

我想要做的就是找到一个正确的方法告诉他们，请先下载这个＆＃34;特别是＆＃34;这个图像＆＃34;。正如@farkas在下面的答案rel="subresource"中所指出的确是一个好的开始，但正如here指出的那样，它主要用作＆＃34; [...]表明实际上它的下载优先级低于样式表/脚本和字体但是等于或高于优先级而不是图像＆＃34;，所以它确实会比许多其他东西首先加载，但仍然没有正确的方法来打破这6个金顶点

正如你所看到的，浏览器首先下载了样式，然后我需要尽快加载图像，然后是脚本，省去了我需要以最高优先级下载的其他2个图像。

需要注意的是，我已将所有脚本放在头部，但在结束前</body>全部放在底部，并且（如我的问题所述）I＆I ＃39;在开始<body>标记之后标记了我的图片，但仅先下载了dark-pattern.jpg，其他2个被推迟了

... </head> <body> <img src="dark-pattern.jpg" style="display:none"> <img src="preloader.jpg" style="display:none"> <img src="xs-style.png" style="display:none"> .. rest of code ...

我想知道一个合适的方式说，＆＃34;请为我的照片找个地方，只需下载窗台，脚本可以稍后来＃34;。

有可能实现这个目标吗？

我也在这里找到了关于这个问题的更多细节，但除了rel="subresource"
之外我的具体要求没有任何内容

http://www.stevesouders.com/blog/2008/03/20/roundup-on-parallel-connections/

http://sgdev-blog.blogspot.it/2014/01/maximum-concurrent-connection-to-same.html

http://andydavies.me/blog/2013/10/22/how-the-browser-pre-loader-makes-pages-load-faster/

PS。如果所有这些东西都有特定的技术名称，请告诉我，这样我终于可以给这个野兽起个名字，谢谢：P

Answer 1

使用CSS或JS加载图像总是比使用HTML慢。这是因为在HTML之后加载和解析了CSS和JS。除此之外，浏览器还使用speculative preload parser优化了这一点。

因此，如果您的图片已经是HTML格式，那么如果为这些图片添加预加载脚本，则不会重新排序img下载。

因此，您基本上有两种选择：

将图片添加到顶部（使用隐藏的img或使用link rel="subresource" (Chrome only)
延迟加载所有其他non-crucial assets using a lazyloader

Answer 2

试试这个：

var all = ['img1.jpg','img2.jpg'];
function onAllImagesLoaded() { alert('loaded!'); }
function preload() {
    var i = new Image();
    var src= all.pop();
    if (!src) {
         onAllImagesLoaded();
         return;
    }
    i.src = src; 
    i.onload = preload;
}
preload();

IE中的缓存图像存在一些问题，有时可能会忽略onload对缓存资源的调用。

修改

您还可以使用设计用于跟踪所有图片加载的精美插件（但不保留图片顺序，所有图片同时加载）：

http://imagesloaded.desandro.com/

如何强制浏览器在前6个并行连接中预取图像

2 个答案: