Geek Answers Handbook

Browsers load hidden assets

If an object (for example, a .jpg image) is in the DOM but is marked as “display: none” CSS, which browsers will load this asset, even if it does not display it technically for the user?

This is a matter of website loading speed. I want to know how CSS rendering properties affect page load time. This question was asked earlier in StackOverflow. However, this was two years ago, and I heard rumors that everything has changed since then.

+4
source share
2 answers

All downloaded Internet Explorer 6+ images have appeared. Firefox does not download the image in versions 3-5, but downloads the image from version 6 and higher. As for Chrome, the image will be downloaded at least before version 14. Safari 4 and upload the image.

Run the test yourself: 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 );

}());

If I had to think about why this was so, I suspect that it has something to do with loading DOM resources as quickly as possible so that they are ready when they are needed. If the image is not added to the document (this means that we are deleting document.body.appendChild...), it will not be requested.

data-*. , src data-src, :

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

:

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

, Internet Explorer.

+7

More articles:


All Articles