Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

how to load image in background?

Problem: I am creating an album.So on every press of

time "NEXT" button I am loading new Images. What I want to achieve is, I want to switch from old image to new image only once the new images has been downloaded fully from server.

Actually I dont want to show partial images while loading.
Is there any solution?

PS SIMILAR QUESTION but this is for Iphone. I need for browser?

like image 469
Ashish Agarwal Avatar asked Jun 09 '11 14:06

Ashish Agarwal


3 Answers

Just make a new image via javascript, and only show the image after the onload has fired. This will make sure you don't see any partial rendering of the image.

Live Demo

    var curImg = new Image();

    curImg.src = "url to your image";
    curImg.onload = function(){
        // do whatever here, add it to the background, append the image ect.
        imgHolder.appendChild(curImg);   
    }
like image 125
Loktar Avatar answered Nov 04 '22 11:11

Loktar


You can play with 2 img tags. img1 shows the first image, while img2, is hidden, and loads the next image.

At the onload event of img2, you can hide img1, and show img2.

And load the next image with img1, and so on.

like image 33
Mic Avatar answered Nov 04 '22 10:11

Mic


link rel="prerender" might do the trick.

http://www.catswhocode.com/blog/mastering-html5-prefetching

like image 26
Fotis Adamakis Avatar answered Nov 04 '22 11:11

Fotis Adamakis