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

我知道答案很可能是否定的。。。但我想问

可以先下载一个img吗

基本上，我有一个占位符GIF（在图像下载时显示在图像的位置），我希望尽快下载GIF

我是否能够以某种方式快速跟踪一个img（GIF）的下载

---

thx

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

---

您还可以通过创建新的图像对象并设置

src

属性来使用JavaScript预加载图像。

尝试将

放在所有其他
标记之前，并使用
可见性隐藏它：隐藏
您可以使用占位符GIF，例如（在css中）

然而，没有好的方法强制一个图像先加载另一个图像。浏览器可以按照他们想要的顺序加载

您可以使占位符更有可能首先下载：


如果占位符在所有页面上都相同，则可以对其进行缓存，以便在下一页上已加载该占位符

确保占位符图像位于页面的早期（使浏览器更早开始加载，浏览器可能会按照图像在html中的显示顺序加载图像）。如果图像不应显示在页面中，只需执行类似于width=“0”或visibility:hidden的操作

将占位符放在服务器快速提供服务的位置（避免动态控制的文件夹-将其放在静态目录中，例如Apache的public/folder中）

使占位符图像变小

通过设置缓存头鼓励缓存，以便映像在遥远的将来过期（例如1年），并且浏览器不需要与服务器进行核对。同时确保映像的私有缓存已关闭（允许公共服务器缓存）


数据URI没有那么好。来自维基百科：


数据URI不会与其包含的文档分开缓存
（例如CSS或HTML文件）因此每次
包含的文档将重新下载

更多地引用相同的资源（例如嵌入的小图像）
来自同一文档的多个副本会导致
嵌入式资源。相比之下，外部资源可以
任意引用多次，但仅下载和解码
一次


如果您在页面上的10个位置使用占位符图像，您将拥有一个更大的页面。
您可以尝试在该gif之前动态加载您不希望加载的所有内容（并且大小有点大）。然后，您可以加载该gif，然后在加载完成后加载其余内容

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

首先，我会使用类似“on document.ready，加载重要的gif，然后在完成后加载其余内容”的内容：

$（文档）.ready（函数（）{
var myImportantImg=$（“根据我阅读的内容，与css结合使用将是一个很好的选择：

img.placeholder {
    background: white url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAABlBMVEUAAAD///+l2Z/dAAAAM0lEQVR4nGP4/5/h/1+G/58ZDrAz3D/McH8yw83NDDeNGe4Ug9C9zwz3gVLMDA/A6P9/AFGGFyjOXZtQAAAAAElFTkSuQmCC') no-repeat scroll left top;
}

将上述代码包含在文档
-部分的
-标记中，以确保它与页面一起加载，并使用
占位符
-类标记相应的图像：

<img src="..." class="placeholder">


这是试图通过延迟占位符后要加载的内容来控制顺序。这不一定会大大加快占位符的加载速度。你会使页面加载速度比其他任何东西都慢。我对问题的理解是，他希望尽快加载此特定图像。我怀疑这对l来说很重要确实，总体而言，页面的加载速度会稍微慢一些（非常慢），但如果操作得当，实际图像的加载速度应该会更快。这不太可能有多大区别。这只会导致阻塞（因此浏览器不会以并行连接的方式下载内容）。
img.placeholder {
    background: white url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAABlBMVEUAAAD///+l2Z/dAAAAM0lEQVR4nGP4/5/h/1+G/58ZDrAz3D/McH8yw83NDDeNGe4Ug9C9zwz3gVLMDA/A6P9/AFGGFyjOXZtQAAAAAElFTkSuQmCC') no-repeat scroll left top;
}

<img src="..." class="placeholder">