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>

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>

• javascript
• html
• image
• asynchronous
• loading

• Possible duplicate stackoverflow./questions/4285042/can-jquery-ajax-load-image – nandu Commented Apr 4, 2013 at 14:09
• 1 Try putting your handlers inside document load – Abhijit-K Commented Apr 4, 2013 at 14:09
• 1 It looks like your only problem is that you want to have img.src = "big.jpg". Then change_image() will be called when the big image is fully loaded, rather than just when the small image loads. – Russell Zahniser Commented Apr 4, 2013 at 14:12

2 Answers 2

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./3-ways-preload-images-css-javascript-ajax/

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>