Jquery Image object

Question

I'm trying to understand this piece of JQuery.

$.fn.imageCrop = function(customOptions) { //Iterate over each object this.each(function() { var currentObject = this, image = new Image(); // And attach imageCrop when the object is loaded image.onload = function() { $.imageCrop(currentObject, customOptions); }; // Reset the src because cached images don't fire load sometimes image.src = currentObject.src; }); // Unless the plug-in is returning an intrinsic value, always have the // function return the 'this' keyword to maintain chainability return this; };

What I can't understand is that a new and therefore empty Image object is created, then an onload method is added to the image and then the image.src is manually reset in case it doesn't fire a reload. But why would it fire a reload at all? It's just an empty image object with no relation to anything. Is is somehow automatically linked to currentObject?

I believe assigning a value to image.src triggers the load of the image. They probably didn't set the src when the image object is created because cached images would load before they handler was assigned. This way, the onload will surely fire after the handler is assigned. Pure guesswork though :). — Tibos
– Tibos, Commented Sep 26, 2013 at 10:18
I was thinking something like this, but it doesn't make sense saying they';re resetting src when it hasn't been set. It is implying currentObject and image are already somehow linked. — AlyoshaKaramazov
– AlyoshaKaramazov, Commented Sep 26, 2013 at 10:24
I see it that $.imageCrop needs the image to be loaded, so it is executed when the image object is loaded. The comment above the line that sets src is not clear enough. It should explain that you set src there, and not before onload because if the image has previously been loaded (and is therefore cached), onload may not fire. Setting src after you create the onload handler stops that happening. It's just an unclear (bad) comment. — Reinstate Monica Cellio
– Reinstate Monica Cellio, Commented Sep 26, 2013 at 11:00
Ahh I see, and hence the need for the second Image object. Thanks. — AlyoshaKaramazov
– AlyoshaKaramazov, Commented Sep 26, 2013 at 11:05

visualex · Accepted Answer · 2013-09-26 10:30:49Z

This is the code with my comments, see if it helps. The src has to be set to wait for the event

 //this is a jquery plugin, //jquery plugins start this way //so you could select $('img').imageCrop(); $.fn.imageCrop = function(customOptions) { //Iterate over each object this.each(function() { //keeps the current iterated object in a variable //current image will be kept in this var untill the next loop var currentObject = this, //creates a new Image object image = new Image(); // And attach imageCrop when the object is loaded //correct image.onload = function() { $.imageCrop(currentObject, customOptions); }; //sets the src to wait for the onload event up here ^ image.src = currentObject.src; }); // Unless the plug-in is returning an intrinsic value, always have the // function return the 'this' keyword to maintain chainability return this; };

Thanks, but I'm still confused. If currentObject is an Image object then why do we need to create a second Image object to attach imagecrop to? Why not just attach it to currentObject? And why do the original comments refer to resetting the src property of the new Image object if it hasn't been previously set?
Creating a "new Image()" creates an "empty" object, thus letting us take control of the loading part, meanwhile if you attach it to the original, the event might not get fired. You just have to load it again.

Collectives™ on Stack Overflow

Jquery Image object

1 Answer 1

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Related