Appending to InnerHtml without rest of contents flicking

Question

I have a div element with some formatted images. On user request, I load additional images asynchronously, without postback, and append the result (formatted HTML for new images) to the div element using JavaScript:

function onRequestComplete(result) {
        var images = document.getElementById('images');
        images.InnerHtml += result;
    }

All is okay, except that part when images in the panel loaded previously flicker after the HTML is appended. As far I understand, the panel is reconstructed, not just new HTML is appended to its bottom. So it isn't web 2.0 behavior.

How can it be done without flicking? Thanks in advance.

Answer 1

Using the += operator is the same as:

images.innerHTML = images.innerHTML + result;

Which will re-render all your container, thus causing "flickering".

You should be able to have the same result appending new elements to the container, without having the flickering. For that, you will need the createElement and appendChild methods.

HTH!

Answer 2

When you append your content, you could tack on something like

<span class='endMarker'></span>

Then instead of just updating "innerHTML" like that, you'd look through the DOM inside the target, find the last <span> with class "endMarker", and then append new content after that. Without meaning to be a "use jQuery problem solved" person I will say that a library like that would make things a little easier. To append the content, you could drop it in a hidden div and then move it.

Answer 3

Make all images a single image, than use CSS positioning to show the desired section. The flickering is due to the loading of the new images.

Answer 4

Use the dom method of adding them:

var div = document.createElement('div');
div.innerHTML= result;
document.getElementById('images').appendChild(div);

Or if you really want to do it the right way, create an dom element for each image and then append them. This also has the benefit of preloading the images.

Or just use jQuery. ;)