浏览器是否加载隐藏资产

Question

如果在DOM中找到资产(例如，.jpg图像(，但标记为"display： none"CSS，哪些浏览器将下载该资产，即使它在技术上没有向用户显示它？

这是一个网站加载速度问题。我想知道CSS显示属性如何影响页面加载时间。这个问题之前在StackOverflow上被问过。然而，那是两年前的事了，我听说有传言说从那以后情况发生了变化。

Answer 1

Internet Explorer 版本 6+ 似乎都在加载图像。Firefox 似乎没有加载版本 3-5 中的图像，但确实从版本 6 及更高版本加载了图像。至于Chrome，图像至少会加载到版本14。Safari 4 及更高版本也会加载图像。

自行运行测试：http://jsfiddle.net/jonathansampson/4L9adwcu/

(function () {
    var image = document.createElement( "img" ),
        timeout = setTimeout(function timeout () {
            alert( "Image was not loaded." );
        }, 3000);
    function loaded () {
        clearInterval( timeout );
        alert( "Image was loaded." );
    }
    if ( image.addEventListener ) {
        image.addEventListener( "load", loaded );
    } else if ( image.attachEvent ) {
        image.attachEvent( "onload", loaded );
    }
    image.style.display = "none";
    image.src = "http://gravatar.com/avatar/a84a8714fd33f6676743f9734a824feb";
    document.body.appendChild( image );
}());

如果我不得不推测为什么会这样，我怀疑这与尽快加载 DOM 资源有关，以便它们在需要时准备就绪。如果图像未添加到文档中(意味着我们删除了document.body.appendChild...(，则不会请求它。

您可以改用 data-* 属性来防止加载图像。当需要图像时，将src值换成data-src值，此时浏览器将加载图像：

<img data-src="http://example.com/dont-load-me.png" />

实际的交换将相当简单：

imageReference.src = imageReference.getAttribute( "data-src" );

我应该提一下，我是Internet Explorer团队的工程师。

Answer 2

具体到图像，此测试已经由位于以下位置的 W3 完成： http://www.w3.org/2009/03/image-display-none/results