CODEWITHSUNDEEP
javascripthtmlcssimageinnerhtml
B_s
B_s

Reputation: 3036

Javascript change innerhtml causing flickering

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!

Upvotes: 3

Views: 4449

Answers (3)

jfriend00
jfriend00

Reputation: 707716

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.

Upvotes: 3

longchiwen
longchiwen

Reputation: 822

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

Upvotes: 1

aarti
aarti

Reputation: 2865

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.

Upvotes: 0

Related Questions