Question

如果我有两个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>

Answer 1

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

如果您不希望隐藏的DIV图像加载到页面，那么一旦您想要加载图像，就必须从客户端插入该HTML。

Answer 2

如果所有图像都嵌入在单个图像映射中，则所有图像将同时加载。这解决了“文字加载顺序”的问题。这有点复杂，但你现在可能想要跳过一个完全不同的问题（http://www.alistapart.com/articles/imagemap/）。

但是，对于“明显的加载顺序”，您可以使用带有<DIV id="1" style="visibility: hidden">选项的DIV开始。然后使用for循环按顺序更改DIV的可见性。

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

此外，也许使用图层的方法：http://jennifermadden.com/javascript/dhtml/showHide.html

我认为有一些方法可以动态加载其他CSS文件（当您准备加载图片时）：http://www.hunlock.com/blogs/Howto_Dynamically_Insert_Javascript_And_CSS

Answer 3

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

Answer 4

正如其他人所说，这完全取决于html标记中首先列出的图像。

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

您可以使用JQuery执行此操作，如此示例中所示。

http://jqueryfordesigners.com/image-loading/

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

4 个答案: