Display a 'loading' image till loading original images in 'image gallery app' - metro style

Question

I am developing an image gallery application ..

Its loading images from the internet..

What i am doing is collecting image url into an array and bind it into a list view ..

Its works fine.. But my problem is the images shows a cross mark ( 'X') till loading the images.

What i am expecting is

1. Display a loading image for each emage untill loads the original image

2. if 1 is not possible, how can i remove the cross mark?

Answer 1

You cannot remove the 'X' mark as that is a browser-specific feature. You could, however, set your images to have a background image of your loading image.

simple example:

<img src="" style="background-image: url(loadingimage.gif)" />

This way, your loader shows up and is masked when the full image loads.

Answer 2

One approach is to set the src to a 1x1 pixel transparent gif, set the dimensions to the final image size, the background image to a loading image, and then use JavaScript to load the image, and onload swap it into the placeholder gif

example

HTML

<img src="images/spacer.gif" alt="Big Image" border="0" id="big_image" style="background-image:url('loading.gif');" width="3396" height="2347" />

JS

var I = new Image();
I.onload = function () {
    document.getElementById('big_image').src = I.src;
};
I.src = 'http://apod.nasa.gov/apod/image/0911/ngc2623_hst_big.jpg';