Javascript + HTML - load image in the background (asynchronously?)

Question

I've found many topics describing javascript image loading but not exactly what I am searching for.

I am currently loading images in html the normal way, like

<img src="images/big-image.jpg">

This results in a webpage where you have empty spaces that are filled with the loading image from top to bottom. In addition I always have to watch the filesize of the image.

What I want to achieve is that when the page loads, a downscaled version of every image (around 10kb) is shown. When the page is fully loaded, there should be a javascript function which loads the big images in the background and replaces them when they are loaded.

I already found a way to do this with javascript but until all images are replaced the browser shows that he is in "loading" state. Is it possible to do the loading task in the background by using asynchronous methods?

<img src="small.jpg" id="image">

<script>
        <!--
            var img = new Image(); 
            img.onload = function() { 
               change_image(); 
            } 
            img.src = "small.jpg";  

            function change_image() {
                document.getElementById("image").src = "big.jpg";
            }
        //-->
</script>

Solution 1

Have you tried this?

window.onload = function() {
    setTimeout(function() {
        // XHR to request a JS and a CSS
        var xhr = new XMLHttpRequest();
        xhr.open('GET', 'http://domain.tld/preload.js');
        xhr.send('');
        xhr = new XMLHttpRequest();
        xhr.open('GET', 'http://domain.tld/preload.css');
        xhr.send('');
        // preload image
        new Image().src = "http://domain.tld/preload.png";
    }, 1000);
};

http://perishablepress.com/3-ways-preload-images-css-javascript-ajax/

Solution 2

Do you know what is really annoying? If you just miss to add the window.onload function to your own solution and it works as you wanted...

Thanks for you idea! :D

<img src="small.jpg" id="image">

<script>
        <!--
            window.onload = function() {
                var img = new Image(); 
            img.onload = function() { 
               change_image(); 
            } 
            img.src = "small.jpg";  

            function change_image() {
                document.getElementById("image").src = "big.jpg";
            }
            };


        //-->
</script>