1

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

4 回答 4

2

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

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

于 2009-07-15T14:39:12.197 回答
0

如果所有图像都嵌入到单个图像映射中，则所有图像将同时加载。这解决了“文字加载顺序”的问题。虽然这有点复杂，而且您现在可能想跳过一个完全不同的问题（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

于 2009-07-15T15:21:02.563 回答
0

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

于 2009-07-15T15:31:01.810 回答
0

正如其他人所说，这一切都归结为 html 标记中首先列出的图像。

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

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

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

于 2009-07-15T21:07:52.143 回答