浏览器加载隐藏的资产

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团队的工程师.