3

I use javascript to change the contents of a div every 5 seconds with another image. It simply picks a random image and then uses .innerHTML to change the div's content to the correct tag. But, when it loads the script, the image is changed but the whole page flickers a bit very shortly. Is the use of .innerHTML causing that? If so, how could I change the image in a div with javascript? Thanks!

Edit: Multiple suggestions from you were spot on: a height was missing, overmore it inserts a new img every time. I fixed it with a display:inline and change the img src instead of .innerHTML. Again thanks everyone!

B_s
  • 3,026
  • 5
  • 32
  • 51
  • 3
    A jsfiddle would be helpful – turnt Feb 25 '14 at 20:48
  • Have you tried different browsers? – frhd Feb 25 '14 at 20:49
  • 1
    You could just edit the "src" attribute of an existing element, that might do the trick. – dkasipovic Feb 25 '14 at 20:50
  • 1
    My guess is that if the `` tag doesn't have a height and width attribute, then the browser has a short time (before the new image loads) where it doesn't know how big the image is which can cause some relayout perturbations. If the images are all a know height and width, then specify those attributes can fix it. Or, you can preload the images so they are all already cached. If you show your actual code, we may also be able to make code suggestions. – jfriend00 Feb 25 '14 at 21:10
  • @D.Kasipovic That was one solution, which I have used eventually together with a `display:inline;`. Thank you. – B_s Feb 25 '14 at 21:19

3 Answers3

3

Expanding my comment into an answer...

To prevent flicker when changing images, the #1 thing you need to do is make sure that the browser is never in a state where it does not know the height and width of the image. If you also want to prevent it from ever showing an empty space where the new image is, then you also need to make sure the image is already pre-cached before you put it in the page. Your simplest fix is to probably just make sure that any image tag you supply has a height and width attribute on it that matches the image size and that whenever you replace that image tag, it also has the same height and width as the one you are replacing. This should prevent any flicker. For the cleanest initial display and replacement of the image, you can do all of the following:

  1. Make sure your image tag has both a height and width attribute to ensure the browser knows exactly how much space to reserve for the image even before the browser has loaded that image. If you don't do this, then the browser doesn't know the image size until the image is at least partially downloaded and it must allocate some initial space and then adjust to the final dimensions as the image is downloaded. This can cause the flicker as the page lays out to one set of dimensions and then must readjust to the final size. If the height and width attributes are specified, this change in size does not happen.

  2. Rather than replace the entire image tag, you can often just change the .src attribute of your existing image tag by just assigning it a new image URL.

  3. If you want the images to display instantly with no time where the browser doesn't yet have the image bits to display, then you can precache your images. Image caching code has been provided in these previous answers: here, here, here and here.

Community
  • 1
  • 1
jfriend00
  • 683,504
  • 96
  • 985
  • 979
1

Page flickers because you insert new img tag in DOM with src set. That causes round trip to server to load image.

You can remove flickering by preloading new image (you can show loader while new image is retrieved from server).

something like:

var imageUrl = "newimage.jpg";
var imageElement = $("img");
var img = new Image();


// show loader here

img.onload = function(){
    imageElement.attr("src",imageUrl); // this will actualy show preloaded image

    // hide loader here
};
img.onerror = function(){
    // som-ting-wong came along

    // hide loader here
};
img.src = imageUrl ; // this will start image preloading
longchiwen
  • 822
  • 6
  • 11
  • Setting onload handler AFTER you set `.src` is a problem in IE. You may miss the onload event if the image is already cached. – jfriend00 Feb 25 '14 at 21:10
  • Preloading did the trick with the images appearing immediately but because the whole img tag was replaced with another the 'flickering' still appeared. It's fixed now, see my edit. Thanks for you elaborate info though, it helped with me understanding the problem better! – B_s Feb 25 '14 at 21:20
  • @jfriend00 please see my comment above, that'll explain. I upvoted the comment about the src of the img tag. My apologies if I don't use the voting and answering system correctly, I'm still fairly new. Also thank you for your comment, together with the selected answer it helped me understand the problem. – B_s Feb 25 '14 at 21:24
0

One thing that would help in Chrome & Firefox at least, would be to save your jpegs with progressive scan, and they would render faster, possibly reduce flickering.

http://calendar.perfplanet.com/2012/progressive-jpegs-a-new-best-practice/

The other would be to modify the code so instead of replacing innerHTML you can hide/unhide the image inside a div.

Hope this helps.

aarti
  • 2,815
  • 1
  • 23
  • 31