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

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

• javascript
• jquery
• html
• drag
• src

• preload the images so that the browser doesn't have to download them at that point. There are plenty of existing image preload tutorials – Kevin B Commented May 24, 2013 at 14:47
• you need to preload the images so they are cached first and then they won't flicker when you change the src – Pete Commented May 24, 2013 at 14:47
• but one think i dont really get is, its still flickering if i allready dragged them. doesnt that mean they're all loaded? thats because i didnt think of preloading them anymore! – supersize Commented May 24, 2013 at 14:48
• It does, in that case you may be seeing the result of the browser smoothing the shrunk version of the graphic. What kind of flicker is it? the image disappearing and reappearing? it getting pixelated and then not pixelated? – Kevin B Commented May 24, 2013 at 14:50
• its shortly hidden, and then appears the new one! – supersize Commented May 24, 2013 at 14:52

4 Answers 4

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.

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.

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];
     }
 }

See the comments. You should ensure that the images are loaded before you show them. This is called pre-loading and can e.g. be achieved by having hidden images (not using display:none but placing them offscreen) that have the SRC that you want.

Edit: see the more elaborate answer by @Sebástien !