Geek asks and answers

Javascript innerhtml change causes flickering

I use javascript to change the contents of a div every 5 seconds with a different image. It just selects a random image and then uses .innerHTML to change the contents of the div to the correct tag. But, when it loads the script, the image changes, but the whole page flickers a little. Is using .innerHTML used? If so, how can I change the image in a div using javascript? Thank!

Edit: Several suggestions from you were in place: there was no height, in addition, a new img is inserted each time. I installed it with display:inlineand changed img srcinstead .innerHTML. Thanks again everyone!

+3
source share
3 answers

, img DOM src. .

, ( , ).

- :

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
+1

...

, - , , , . , , , , , . , , , , , , , , , , , , . . :

  • , , , , , . , , , , , , . , , . , .

  • .src , URL .

  • , - , , . : , , here .

+2

One thing that could help in Chrome and Firefox, at least, would be to keep your progressive scan jpeg and they would display faster, possibly reducing flicker.

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

Another would be changing the code, so instead of replacing innerHTML, you can hide / show the image inside the div.

Hope this helps.

0
source

More articles:


All Articles