Prevent flickering of a large image when changing src

Question

I have a problem with blinking images 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 drag one of them using jQuery UI, all change their src and dragend:

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

so good, so good. But I need to use large images (2000 x 2000 pixels), because all the images can be clicked, and then they will liven up to the full size of the viewport so that they will not be pixelated.

 $this.animate( { width: 1800, top: -650, left: -250 }, { duration: 4000, easing: 'easeOutElastic' }) 

I think they flicker due to the size of each image. Do any of you have an idea how to prevent this flicker on images if all src are changing at the same time?

Thank you for your efforts.

Answer 1

The problem you described is not like the preload problem.

For preloading, it will happen when you download ANOTHER image from the server as soon as you start moving it. But, as I read your question, you are moving the DOM object containing your image in the SRC.

This is most likely a problem with the browser because it should scale your images from 2k x 2k to 100 x 100. This is quite expensive material for interpolation. So your main problem could be, as you mentioned, the size of an image.

Even preloading will not be useful, because then you will have the same problems.

In my eyes you should have two versions of your image: one small (the size you want to drag) and a large one that you want to display. A larger one can be downloaded automatically in the background or on demand when the user clicks on the image. It’s quite common on the Internet to show a scaled image to the size of the screen with smooth animation and start preloading in the background, and when the preload is finished, replace the full-screen image to remove the pixel effect.

I hope I get it.

Answer 2

You can use this function to preload 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]; } } 

Answer 3

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

Preloading involves loading the image into an img tag off screen, but still in the DOM. This caches the image locally, which means that the next time you try to use the same source, it will pull it out of the cache instead of asking the server for the image (and thus flicker).

Image preloading is simple:

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

What you want to decide is when you want to upload images. If you download them all first, you are likely to use more bandwidth. If you download them by click, you will get buffering.

You can check if the image is loaded using the onload present in the img tags and, if necessary, in jQuery, as shown below:

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

Credits by Robin Lebouf for the short form Image ().

Answer 4

See comments. You must make sure that the images are uploaded before showing them. This is called preloading and can, for example, be achieved using hidden images (not using display:none , but placing them on the screen) that have the SRC that you want.

Edit: see the more complex answer @ Sebástien!