在所有图像加载事件完成后，如何使这个 jQuery 插件可链接？

Question

[更新]我决定的解决方案：

决定将回调传递给插件将在所有图像完成加载后触发一个事件。链接仍然是可能的。 更新的 Fiddle

---

我正在构建一个可链接的 jQuery 插件，可以动态加载图像。

（将以下代码视为 JSFiddle）

Html：

<img data-img-src="http://www.lubasf.com/blog/wp-content/uploads/2009/03/gnome.jpg" style="display: none" />

<img data-img-src="http://buffered.io/uploads/2008/10/gnome.jpg" style="display: none" />

而不是添加一个 src 属性，我给这些图像一个 data-img-src 属性。我的插件使用该值来填充 src。此外，这些图像一开始就是隐藏的。

jQuery 插件：

(function(jQuery) {
jQuery.fn.loadImages = function() { 
    var numToLoad = jQuery(this).length;
    var numLoaded = 0;
    jQuery(this).each(function() { 
        if(jQuery(this).attr('src') == undefined) {
            return jQuery(this).load(function() {
                numLoaded++;
                if(numToLoad == numLoaded)
                    return this; // attempt at making this plugin 
                                 // chainable, after all .load()
                                 // events have completed.
            }).attr('src', jQuery(this).attr('data-img-src'));
        } else {
            numLoaded++;
            if(numToLoad == numLoaded)
                return this; // attempt at making this plugin 
                             // chainable, after all .load()
                             // events have completed.
        }
    });
    // this works if uncommented, but returns before all .load() events have completed
    //return this;
};
})(jQuery);


// I want to chain a .fadeIn() after all images have completed loading
$('img[data-img-src]').loadImages().fadeIn();

有没有办法让这个插件可链接，并让我的 fadeIn() 在所有图像加载后发生？

Answer 1

就像上面提到的 RedWolves 一样，你应该使用：

return this.each(function() { //.....

以便你的代码是可链接的。

您提到您想在所有内容加载完毕后执行此操作。为此，您应该将代码包装在 jQuery 的 $() 函数中，该函数采用内联匿名函数，该函数将在 DOM 加载时执行。

所以在你的情况下，它将是：

jQuery(function($){    // jQuery is the same as $, and it passes itself to the function
    $('img[data-img-src]').loadImages().fadeIn();
});

Answer 2

让 load() 调用同步执行的唯一方法是预先设置它，

$.ajaxSetup({
  async: false
});

这将暂停代码执行，直到加载完成，然后您可以正常返回。

http://jsfiddle.net/jXjT7/31/

Answer 3

1. 您不需要将其包装在 jQuery 函数中。 this 已经指向 jQuery 对象。

2. Return this 将返回可链接的 jQuery 对象，因此在这一行上

jQuery(this).each(function() {

将其替换为 this

return this.each(function() {

这将使您的插件可链接 请参阅 创作指南如需更多帮助

Answer 4

Andrew 是正确的，没有办法延迟对链式函数的调用，例如示例中的“fadeIn”，除非使用同步 ajax 请求加载。虽然不太适用于图像标签加载等...

但他忘记了一个有趣的细节...像 fadeIn 这样的动画方法在调用时不会立即执行动画，而是使用动画队列。因此，在您的情况下，您真的不介意是否立即调用 fadeIn，您只是希望动画队列暂停，直到图像加载完毕。

例如，您可以通过在调用插件时执行 .delay(1000000000) 来做到这一点，然后在图像加载后执行 .stop() 。

做同样事情的一种更政治正确的方法是，用存储其第一个参数的函数代替 .delay() 到 .queue() ，并在图像加载后调用该存储的参数，而不是 .stop() 。

编辑：你的固定小提琴 jsfiddle.net/jXjT7/42/