Wait till image load then show text.

iaresean · Apr 5, 2006

Hi all;

I have a bunch of thumbnails on the bottom of a page. When a user clicks the thumbnail, the source for an image object ('displayimg') gets set and some description text is displayed.

My problem is that I would like to set the text to be invisible untill the image has fully loaded. I have coded it so that when a thumbmail gets clicked the information text is initially set as being invisible (tried both display='none' and style.visibility='hidden'). Following this I then set the displayimg src to the required image. In the img object decleration I have set an onLoad="showText()" procedure which is supposed to set the text to display (tried display='' and style.visibility='visible') after the image is fully loaded.

Unfortunately the showText() procedure seems to fire immediately without waiting for the image to fully load. Strange, I think perhaps this is because I am dynamically reassigning the src of the image object using javascript.

Does anybody have any recommendations on how I might tackle this problem?

Any and all help is greatly appreciated!

Sean. [peace]

BillyRayPreachersSon · Apr 5, 2006

Check out my FAQ, "Detecting the dimensions of an image client-side": faq216-5781

It shows how to assign an onload hander to an image, and works just fine.

Hope this helps,
Dan

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

robherc · Apr 5, 2006

Sean;

Did that fix the problem for you?

If not, try creating an iframe where you want the images to load, then loading them as an HTML file like the following:

Code:

<html>
<head>
</head>
<body>
<img src="imagefile.gif" onLoad="window.parent.showText();"></img>
</body>
</html>

This should solve the problem you are having here as the image would be loaded into the iframe, but [t]should[/i] not trigger the showtext() function until the image is fully loaded.

I hope this helps;
Rob Hercules

iaresean · Apr 6, 2006

Thank you guys!

Both comments a solution to my problem. I decided to go with Dan's solution however, partly because it only require me to insert 4 lines of code, and partly because I am not a big fan of frames.

However, I will definitely keep the iframe solution in mind, it may yet come in handy one day.

Thanks again!

Sean. [peace]

iaresean · Apr 6, 2006

Woops. I have run into a bit of a problem. The image load doesn't seem to work in IE Mac for some reason - although this shouldn't be too surprising given the state of the browser!

Here is a snippet of code that makes use of the javascript code I have made to load an image in a browser:

Code:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Test Mac IE Image Load Page</title>
<script type="text/javascript">
	var tempImage;
	var imgName;

	function prepareImage(strImageName){
		// Load the image first
		// When it is completely loaded show it and hide text
		imgName = strImageName;
		tempImage = new Image();
        tempImage.onload = showDetails;
        tempImage.src = "../File_Uploads/Images/" + strImageName;
	}

	function showDetails(){
		// Set the image and hide the text
		document.imgDisplay.src = "../File_Uploads/Images/" + imgName;
		document.getElementById("waitload").style.display = 'none';
		
		setWindowHeight();
	}

	function setWindowHeight(objImage){
		var winWidth = 795;
		var winHeight = 595;
		
		var winLeft = (screen.width - winWidth) / 2;
		var winTop = (screen.height - winHeight) / 2;
	
		window.resizeTo(winWidth,winHeight);
		self.moveTo(winLeft,winTop);
	}
</script>
</head>

<body style="padding:0px; margin:0px;" onLoad="prepareImage('check.jpg');">

<em id="waitload" style="font-style:normal;">
Please wait<br />
while image<br /> 
loads.
</em>

<img name='imgDisplay' id='imgDisplay' src='../_Images/shim.gif'>

</body>
</html>

Does anyone know why it is acting this way? Any and all help is greatly appreciated!

Sean. [peace]

BillyRayPreachersSon · Apr 6, 2006

Put an alert at the top of the showDetails function - it may well be that it is never getting called (maybe IE/Mac doesn't support image onload events?)

Dan

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

iaresean · Apr 6, 2006

The alert does fire off. I have noticed that the first request results in no image being shown. But the second request to the page does show the image - I believe this is because it is cached.

Phew...I am not a big fan of this cross-browser thing. :-(

One can only hope that developers won't have to deal with this sort of thing for too much longer.

Anyway, will be googling this one. If anyone has a tip for me I would be greatly appreciative!

Sean. [peace]

BillyRayPreachersSon · Apr 6, 2006

Try changing this:

Code:

document.imgDisplay.src = "../File_Uploads/Images/" + imgName;

to this;

Code:

document.imgDisplay.src = this.src;

and see if it makes any difference. Failing that, try putting back in the code you removed from my FAQ showing how to bypass a caching issue (appending a random parameter to the end of the image filename).

Dan

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

iaresean · Apr 6, 2006

Thanks Dan,

Tried all, but to no avail. Its the only browser that it doesn't work in but the one of the most important ones it needs to work in. :-(

I am going to go for the iframe solution that should work.

Thanks for all the comments though, I definitely learned loads in the process.

Sean. [peace]

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Wait till image load then show text.

iaresean

Programmer

BillyRayPreachersSon

Programmer

robherc

Programmer

iaresean

Programmer

iaresean

Programmer

BillyRayPreachersSon

Programmer

iaresean

Programmer

BillyRayPreachersSon

Programmer

iaresean

Programmer

Similar threads

Part and Inventory Search

Sponsor