<img>下载顺序-可以设置吗？

Question

我知道这个问题的答案很可能是不...但我想问一下。

可以先下载一个img吗？

基本上我有一个占位符GIF (它显示在图像的位置，因为他们下载，我想让该GIF尽快下载。

我能以某种方式快速跟踪一个img ( GIF)的下载吗？

thx

Answer 1

尝试将gif为src的<img>标记放在所有其他<img>标记之前，并使用visibility:hidden将其隐藏

Answer 2

您可以将该映像作为数据URI包含在内(如果它不是太大的话)，这样就不会有单独的网络请求来获取该映像。当然，它会增加实际提供的HTML内容的大小。

您还可以通过创建一个新的图像对象并设置src属性来使用JavaScript预加载图像。

Answer 3

你可以尝试动态加载所有你不想在gif之前加载的东西(并且在大小上有一定的意义)。然后，您可以加载该gif，并在完成后-加载其余的内容。

这可以使用Javascript来完成。我不确定是否已经有一个库可以帮助你轻松做到这一点，但它应该不会太难做到。

我开始使用类似于“在document.ready上，加载重要的gif，然后在完成后，加载其余部分”的方式：

$(document).ready( function() {
    var myImportantImg = $('<img />');
    $(myImportantImg).on('load', function() { 
        // attach myImportantImg somewhere
        // load rest
    });
    $(myImportantImg).attr('src', 'http://url.to/myImg.gif');
});