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!

Register Log in
  • Congratulations Chris Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Image Event Handler on Prototype

Status
Not open for further replies.
RogerFGay

RogerFGay

Programmer
Jun 22, 2001
49
SE
I want to use the same (onload) event handler for all images in a page. I've been adding the event handler to every image object that I create.

loop:
...
aImgObj.onload = myEventHandler;

It seems like I should be able to add it to the image object prototype instead. But I haven't figured out the syntax for it ... been looking around on the web and doing trial and error for an hour now.

Can it be done?
 
Sort by date Sort by votes
Error. 'Image.prototype' is null or not an object. It doesn't like me to mess with Image. (also tried images with various ways to reach it last night ... based on stuff I found while web surfing)

I wonder if I can create my own object prototype for an image and add properties to that? I thought about it a little last night, and it seemed like I'd just have to go to extra lengths to get the real image object from my object; but maybe use of inheritance somehow?

 
Upvote 0 Downvote
Wow... this is proving harder than I would have thought. While the following works for me fine in Fx 1.5, it fails in IE 6... but I'll keep thinking about it.

Code: 
<html>
<head>
	<script type="text/javascript">

		var imagesLeftCount = 0;
		var RealImage = Image;
		Image = function(width, height) {
			imagesLeftCount++;

			if (width && height) {
				var image = new RealImage(width, height);
			} else if (width) {
				var image = new RealImage(width);
			} else {
				var image = new RealImage();
			}

			image.onload = imageOnLoadFunc;
			return(image);
		}

		function imageOnLoadFunc() {
			imagesLeftCount--;
			if (imagesLeftCount == 0) {
				alert('All images have loaded.');
			}
		}

		window.onload = function() {

			var image01 = new Image();
			image01.src = '1pxTranny.gif';
			document.body.appendChild(image01);

			var image02 = new Image();
			image02.src = 'dantemp.jpg';
			document.body.appendChild(image02);

			var image03 = new Image();
			image03.src = 'headerLogo.gif';
			document.body.appendChild(image03);

			var image04 = new Image();
			image04.src = 'P1220_144608.jpg';
			document.body.appendChild(image04);

			var image05 = new Image();
			image05.src = 'P1220_144650.jpg';
			document.body.appendChild(image05);

			var image06 = new Image();
			image06.src = 'tick.gif';
			document.body.appendChild(image06);
		}

	</script>
</head>

<body></body>

<html>

Dan

Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch
[/tt]
 
Upvote 0 Downvote
Wow Dan. I'm getting the impression that this isn't your first attempt at writing javascript code. :) Writing Image as a function ... recreating the object ... looks like you might be taking a pop (I think) at what I've been trying to get a grip on during the past hour; i.e. is there some way to create another object based on Image that allows you to set the onload property.

Cross-browser application has always an extreme challenge for me ... and I don't think I'm alone. I'm always pleased when standards are settled and Microsof finally decides to implement. BTW: I just won a copy of "Ajax in Practice" at the JavaRanch Big Moose Saloon (another discussion forum). Should be some interesting tips in it.
 
Upvote 0 Downvote
Just re-read my last post above yours ... creating a new object ... exactly what it says. I get this way sometimes.
 
Upvote 0 Downvote
I tried it on IE 7 ... doesn't work there either ... I get the message: 'not implemented'
 
Upvote 0 Downvote
Is there some kind of construction that can be done something like:

ImagePreloader.prototype = function(Image) {}
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

Kennelbloke
  • Locked
  • Question
Can't Get Markers to show on Map
Replies
0
Views
744
Kennelbloke
Kennelbloke
rogerte
  • Locked
  • Question
Code that works on Windows, Android and Iphone
Replies
0
Views
580
rogerte
rogerte
JScannell
  • Locked
  • Question
Javascript issue on iPhone/iMac platforms
Replies
0
Views
606
JScannell
JScannell
Ahmad khalafalla
  • Locked
  • Question
How to listen to 'onclick' event on the document
Replies
1
Views
177
feherke
feherke
JScannell
  • Locked
  • Question
Javascript events
Replies
1
Views
252
Daniel K
Daniel K

Part and Inventory Search

Sponsor

Back
Top