Question

我正在写一个像这样的小插件：

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

我想在插件完成其工作后触发回调：

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

我该怎么做？

编辑：它仍然没有解决，即使我得到一个减分因为我的问题没有明确指出。但它显然是一个有点棘手的解决方案。有没有js忍者可以解决这个问题？

谢谢！

Answer 1

我会使用延迟对象：

(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) ;

请参阅http://jsfiddle.net/Yq4Mf/1/（感谢@salexch提供的最初小提琴，然后我将答案分开）

Answer 2

最简单的解决方案是

 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) ;

Answer 3

试试这个：

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

编辑：还原。你的问题没有明确说明......

Answer 4

解决方案：

(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) ;

在jQuery中如何在“Every＆amp; Load”循环中加载图像时调用函数

4 个答案: