Prevent large image flickering on src change

Question

I've a problem with image flickering with large images. In my body i have 5 images:

<img id="img1" src="img1.png" width="250">
<img id="img2" src="img2.png" width="250">
<img id="img3" src="img3.png" width="250">
<img id="img4" src="img4.png" width="250">
<img id="img5" src="img5.png" width="250">

and one I'm dragging one of them with jQuery UI, all are changing their src and on dragend as well:

function dragStart() {
        $('#img2').attr('src','newimg2.png');
        $('#img3').attr('src','newimg3.png');
        $('#img4').attr('src','newimg4.png');
        $('#img5').attr('src','newimg5.png'); }

so fine so good. But I need to use large images (2000 x 2000px) because all images can be clicked and then they will animate to the full size of the viewport that they dont pixelate.

$this.animate(
                { width: 1800, top: -650, left: -250 }, 

                {
                    duration: 4000,
                    easing: 'easeOutElastic'
                }) 

I think because of the size of every image, they are flickering. Does anyone of you have an idea how to prevent this flickering on images, if all src change at the same time ?

Thanks for your effort

Solution 1

The problem you described does not sound like a pre-loading issue to me.

For preloading would happen, when you load ANOTHER image from the server once you start to move it around. But like I have read your Question you are moving the DOM-object containing your image in SRC around.

Thats most likely a Browser issue, because he has to scale your images down from 2k x 2k to lets say 100 x 100. That is some expensive interpolation stuff to do there. So your main problem could be, like you mentioned, the size of the image.

Even preloading would not be of use, because you would have the same issues then.

In my eyes you should have two versions of your image: One small one (the size you want to drag around) and a big one, the one you want to display. The big one can either be loaded automatically in background or on demand, when a user clicks on an image. In the web it is quite common, to show scale the small image to screen size with smooth animations and start to preload in the background and when the preload finished, replace the fullscreen image to remove the pixel effect.

I hope I made myself clear.

Solution 2

The key to what you are trying to do is called preloading. However, you'll need to think carefully about how you want to do this.

Preloading involves loading the image in an img tag off-screen, but still in the DOM. This caches the image locally, which means that the next time you attempt to use the same source, it'll pull from cache instead of querying the server for the image (and, thus, flicker).

Preloading an image is a simple matter:

(new Image()).src="mysource.png";

What you want to decide is when you want to load the images. IF you load them all at first, you'll potentially use up a lot of bandwidth. If you load them on-click, you'll get buffering.

You can check if an image is loaded using the onload event present on img tags and wrapped within jQuery if needed, as follows:

var i = new Image();
i.onload = function() {
  console.log("Loaded");
}
i.src = "mysource.png";

Credits to Robin Leboeuf for the concise Image() form.

Solution 3

You can use a function like this to preload your images:

 function imagesPreload(){
     var imgArray = new Array("path/to/img1.jpg", "path/to/img2.jpg", "path/to/img3.jpg");
     for (var i=0; i<imgArray.length; i++) {
         (new Image()).src = imgArray[i];
     }
 }

Comments

[Kevin B]

you don't have to append it to the dom btw.

[Sébastien Renauld]

@KevinB: Thank you, I did not know this! Assumed that you had to force the browser to render the image by appending it to the DOM to force a load.

[Ron van der Heijden]

Omg.. left -99999? That doesn't make any sense. You also could just use <div style="display: none;"><img src="" /></div>...

[Sébastien Renauld]

@Bondye: Changed. Happy now?

[Kevin B]

@SébastienRenauld RobinLevoeuf's answer is all that is needed to preload, (newImage()).src = thesrc

[Sébastien Renauld]

@KevinB: changed and added a bit on the load bit.

[Kevin B]

@SébastienRenauld Bind the load event before you set the src, otherwise you won't catch the load event in IE because it triggers too fast on cached images.

[supersize]

thanks to you, that should be the problem because all images were already loaded and its still flickering! very good point and well thought from you! thanks :)

[supersize]

thanks for your answers. the images still are still flickering, and i guess the checked answer above is the problem!

[supersize]

one question, couldnt i simply preload images by creating divs with display none in the body with the images i want?