Question

我在一个呈现相册的页面上有这个htmls。

正如您所看到的，有3 <img>个标签。

前两个在<li>下面，显示：无。但最后一张图片是可见的，因为它有style =''。

我的问题是：在页面加载过程中，前两个图像会加载最后一个图像，即使它们的容器有显示：none？

<div class="gallery">
                    <ul id="PhotoContainer">
                            <li style="display: none;" name="DSC01100.JPG" id="4ee01301602fdd0efc35683e">
                                <img src="http://site/Files/Get?fileId=4ee01306602fdd0efc356844"></li>
                            <li style="display: none;" name="DSC01102.JPG" id="4ee01308602fdd0efc35685f">
                                <img src="http://site/Files/Get?fileId=4ee0130a602fdd0efc356864"></li>                            
                            <li style="" name="DSC01101.JPG" id="4ee01306602fdd0efc35684f">
                                <img alt="my description for this image" src="http://site/Files/Get?fileId=4ee01308602fdd0efc356855"></li>
                    </ul>
                </div>

Answer 1

这取决于哪个浏览器正在加载网页，我知道谷歌浏览器会加载所有图片，我希望大多数其他浏览器都这样做...

Answer 2

所有图片都会加载到缓存中，从技术上讲也会加载到网页中。然而，css在它们与人眼接触之前隐藏了2张图像。

Answer 3

如果通过“已加载”表示已下载，则为是。 带有display: none样式的资源仍然被提取，只是没有渲染。实际上，这是一种有效的图像预加载技术，正如本article中所述。

要验证，您可以加载页面并查看Chrome开发者工具或Firebug中的已下载资源标签。

页面加载时的图像加载

3 个答案: