set Image and lable text in javascript

Question

Hello everyone..

In my application, I have a Javascript function which get called after every minute. This javascript function returns me new comma seprated string each time which contains image path and image name. I simply split this string and set the Image path to image and text to lable. Goel is to achive effect like image slide show.

Every thing works fine. The Images and name get change successfully on mizilla. When I browse this in IE the image and name not change at one time. Name get change first and then Image get changed. It was loosing the slide show effect.

I don't know why this is happening. Is it because of browse..? I need to change both Image and name at a time.

Can anyone tell me how to do it...?

Here is the sample javascript function I use to set the Image

function setImage(response)

{

if(response.value != null)

{

var imgArr=response.value.split(',');

var SN=document.getElementById('ctl00_MC_cntrlGal_ScreenName');

var mainImage=document.getElementById("Img");

if(SN!=null && Img!=null)

{

SN.innerHTML=imgArr[0];

mainImage.src=imgArr[1];

}

}

}

Thanks in advance.

Sachin

Answer 1

I think the problem is on image loading. Each time a new image path is set the browser takes time to load the image. As you know Images are heavy to load than text so the text is assigned fast and the image is being loaded slowly.

You can use setTimeOut and pause for some miliseconds and then set the text. I think it can solve your problem.

Please check.

Answer 2

Himadri is right, problem is on image loading. But instead of setTimeout i recommend to use image preloading and load event as signal to change image. Your images have different size and users have different channels, so you can't be sure that image will be loaded in time.