Javascript 您可以控制网页上图像（隐藏与可见）的加载顺序吗？

如果我有两个div，一个显示，另一个隐藏，我希望先加载可见div中的图像，然后才加载其他隐藏图像

有办法做到这一点吗

<div class="shown">
<img src="a.jpg" class="loadfirst">
<img src="b.jpg" class="loadfirst">
<img src="c.jpg" class="loadfirst">
<img src="d.jpg" class="loadfirst">
<img src="e.jpg" class="loadfirst">
</div

<div style="display:none" class="hidden">
<img src="1.jpg" class="loadsecond">
<img src="2.jpg" class="loadsecond">
<img src="3.jpg" class="loadsecond">
<img src="4.jpg" class="loadsecond">
<img src="5.jpg" class="loadsecond">
</div>

---

浏览器应按照标记列出图像的顺序请求图像。所以它会要求a.jpg，b.jpg，等等

---

如果不希望在页面中加载隐藏的DIV图像，则在加载图像后必须从客户端插入该HTML。

如果所有图像都嵌入到单个图像映射中，则所有图像将同时加载。这就解决了文本加载顺序的问题。但这有点复杂，而且是一个完全不同的问题，你现在可能想跳过

但是，对于表观负载顺序，可以从带有选项的DIV开始。然后使用for循环按顺序更改div的可见性

for (var=0;var<=10;var=var+increment) {
document.getElementById(var).style.visibility = 'visible';
}

此外，可能还有一种使用层的方法：

---

我认为有一些方法可以在您准备加载图像时动态加载额外的CSS文件：

有些浏览器（如果不是大多数的话）会自动执行此操作。如果图像是隐藏的，那么它们就不会被下载。

正如其他人所说，这一切都取决于哪些图像首先在html标记中列出

但是，可能有助于解决此问题的方法是显示加载微调器，直到所有图像都已完全加载

您可以使用JQuery实现这一点，如本例所示