anyloaggesaus
New Member
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 \[code\]<img src="http://stackoverflow.com/questions/15813571/images/big-image.jpg">\[/code\]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?\[code\]<img src="http://stackoverflow.com/questions/15813571/small.jpg" id="image"><script> <!-- var img = new Image(); img.onload = function() { change_image(); } img.src = "http://stackoverflow.com/questions/15813571/small.jpg"; function change_image() { document.getElementById("image").src = "http://stackoverflow.com/questions/15813571/big.jpg"; } //--></script>\[/code\]