Question

My title might be a bit unclear. For example I have this code:

$('#element').image_resize_crop();

At a certain point the image_resize_crop plugin I’m writing is finished preloading an image. How do I return that to the script that called the function in the first place?

Thanks!

Answer 1

You can either trigger a custom event which they can subscribe to and execute code,

$(elem).trigger('preloadComplete');

and they can use it

$('#element').on('preloadComplete',function(){
    // do what they want
})

or receive a oncomplete handler as setting of the plugin like this

$('#element').image_resize_crop(function(){

});

Or as part of settings object

$('#element').image_resize_crop({
     onComplete: function(){

     }
});

And if you want to pass some data to that callback you can instruct them so like this

$('#element').image_resize_crop({
     onComplete: function(data){
       // utilize data passed from plugin
     }
});

And call that function when image preloading is complete.

In your plugin code you can call it like

settings.onComplete.call(this,arg1,arg2);

Where this is what that onComplete function will get as this variable inside it, and arg1,arg2 are the values it will get as arguments.

You can use apply method too.

Read more here: call or apply