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

浏览器加载隐藏的资产

2 个答案: