In jQuery How to Call a Function When Images Loaded In a "Each & Load" Loop

Question

I am writing a little plugin like this:

(function($){
  $.fn.extend({
    myplugin: function (callback) {
      return this.each(function(){
        $(this).one('load',function(){
          // Manipulate Images
        }) ;
      }) ;
    }
  }) ;
})(jQuery);

I want to fire a callback after plugin finishes its job:

jQuery('img').myplugin({function(){
  // Do something
}) ;

How can I do this?

Edit: It is still not solved, even I got a minus point because of my question found not clearly specified. But it must be obviously a little bit tricky solution. Are there any js ninja who can solve this?

Thank you!

Alnitak · Accepted Answer · 2013-01-19T11:51:13.557

2

I would use deferred objects:

(function($) {

    $.fn.extend({
        myplugin: function (callback) {

            // create array of deferred objects to track loading
            var dfds = this.map(function(ix, el) {
                return $.Deferred(function(def) {
                    $(el).one('load', def.resolve)
                         .one('error', def.resolve);
                }).promise();
            }).get();

            // register the final callback
            $.when.apply($, dfds).done(callback);

            // and chain
            return this;
        }
    }) ;
})(jQuery) ;

See http://jsfiddle.net/Yq4Mf/1/ (thanks @salexch for the initial fiddle which I've then forked with my answer)

edited Jan 19 '13 at 11:51

answered Jan 19 '13 at 08:42

Alnitak

334,560
70
407
495

@salexch the problem with that version is that it'll fire the alert as soon as _any_ image fails, rather than waiting for every image to do its thing. That's why my version above uses `.resolve` both for success and failure. – Alnitak Jan 19 '13 at 08:57
@salexch and that's why it's wrong - `$.when()` will fire immediately there's any `.reject` in its list, and not wait for any other outstanding deferred items to be resolved. p.s. there's no need to wrap `task.resolve` in a closure, you can pass it directly as a callback. – Alnitak Jan 19 '13 at 09:00
Wow Thank you!! Thats script has many features that I dont know! What does "this.resolve" mean? Can I replace my image manipulation function with it? – Digerkam Jan 19 '13 at 10:11
1

@Digerkam `.resolve` is used to "complete" the promise that a deferred object returns. (A deferred object returns a "promise" to return something later, instead of returning a value now). You can put a different function there, but make sure you call `def.resolve()` at the end of that function. NB: I've added the `def` parameter to `$.Deferred()` and changed `this` to `def` so you can do that. – Alnitak Jan 19 '13 at 10:56
Could you share an example for custom function? Sorry I didnt get where I should put my function that handle each image.. – Digerkam Jan 19 '13 at 11:31
I never used deffered helpers before, but I prepared this: http://jsfiddle.net/akkara/wZCJY/2/ looks work fine, what is your opinion about it? does "when" work with job array also? Thank you! – Digerkam Jan 19 '13 at 11:41
@Digerkam see http://jsfiddle.net/Yq4Mf/2/ for example including image handling. What do you mean by "job" array? – Alnitak Jan 19 '13 at 11:44

Wolf · Answer 2 · 2013-01-19T08:28:52.333

Easiest solution would be

 var cnt = 0;    
 (function($){
    $.fn.extend({
        myplugin: function (callback) {
            cnt = this.length;
            return this.each(function(){
                $(this).one('load',function(){
                    // Manipulate Images

                    // Fire callback
                    if (--cnt==0) callback();
                }).error(function(){
                   if (--cnt==0) callback();
                }) ;
            }) ;
        }
    }) ;
})(jQuery) ;

Cecchi · Answer 3 · 2013-01-19T08:02:19.763

0

Try this:

(function($){
    $.fn.extend({
        myplugin: function (callback) {
            this.each(function(){
                $(this).one('load', function() {
                    // Manipulate Images
                }) ;
            });
            callback();
            return this;
        }
    }) ;
})(jQuery);

Edit: Reverted. Your question is not very clearly specified...

edited Jan 19 '13 at 08:02

answered Jan 19 '13 at 07:48

Cecchi

1,525
9
9

Ah, sorry I misunderstood your question. You mean a callback when all images have loaded? Let me edit... – Cecchi Jan 19 '13 at 07:49
Now this is my answer... Except you added two bugs. – Denys Séguret Jan 19 '13 at 07:52
What does `count == count--;` do? – Blender Jan 19 '13 at 07:54
@Blender It does nothing. And `count = count--` wouldn't fix it. – Denys Séguret Jan 19 '13 at 07:55
What if a image couldnt load? – Digerkam Jan 19 '13 at 07:55
@Cecchi As I precised, `count = count--;` doesn't change `count`. – Denys Séguret Jan 19 '13 at 07:56
@dystroy, good catch. Thanks. Didn't see your answer when I wrote mine. – Cecchi Jan 19 '13 at 07:58
It looks not nice, how about write it only "if (--count)" :) – Digerkam Jan 19 '13 at 08:01
You fire callback immidiately, but images wouldnt loaded – Digerkam Jan 19 '13 at 08:08

score 0 · Answer 4 · answered Jan 19 '13 at 07:50

0

A solution :

(function($){
    $.fn.extend({
        myplugin: function (callback) {
            var nb = this.length;
            return this.each(function(){
                $(this).one('load',function(){
                    // Manipulate Images
                    if (--nb==0) callback();
                }) ;
            }) ;
        }
    }) ;
})(jQuery) ;

answered Jan 19 '13 at 07:50

Denys Séguret

372,613
87
782
758

What if a image couldnt load? – Digerkam Jan 19 '13 at 07:54
Then the callback isn't called. Isn't it your requirement ? It sounds reasonable. – Denys Séguret Jan 19 '13 at 07:55
I need to fire it whether loaded or not – Digerkam Jan 19 '13 at 07:57
In that case, simply add a call to `callback` immediately following the `each` loop and return a value (probably `this`) after that. Your question could use a little more clarification. – Cecchi Jan 19 '13 at 08:00
Sorry! But I said as "plugin finishes its job" not when plugin "return", it is asynchronous loading.. – Digerkam Jan 19 '13 at 08:05

In jQuery How to Call a Function When Images Loaded In a "Each & Load" Loop

4 Answers4