Как сделать этот плагин 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. это уже указывает на объект jQuery.

2. Возврат, при этом объект jQuery будет цепным, поэтому в этой строке

jQuery (this) .each (function () {

замените его на

вернуть this.each (function () {

Это сделает ваш плагин цепным. Для получения дополнительной помощи обратитесь к Руководству по авторизации

Answer 4

Эндрю прав, что нет способа отложить вызов цепочечных функций, таких как 'fadeIn' в вашем примере, за исключением случаев загрузки с синхронным запросом ajax.Не слишком применимо для загрузки тегов изображений и тому подобного ...

Но он забывает одну интересную деталь ... методы анимации, такие как fadeIn, не выполняют свою анимацию сразу при вызове, а используют очередь анимации.Так что в вашем случае вы действительно не возражаете против немедленного вызова fadeIn, вы просто хотите, чтобы очередь анимации была приостановлена ​​до загрузки изображений.

Это можно сделать, например, с помощью .delay (1000000000), когда вызывается ваш плагин, а затем .stop () позже, когда загружены изображения.

Более политически корректный способ сделать то же самое - вместо .delay () выполнить функцию .queue ().который сохраняет свой первый параметр, и вместо .stop () вызывает этот сохраненный параметр при загрузке изображений.

РЕДАКТИРОВАТЬ: ваша фиксированная скрипка jsfiddle.net/jXjT7/42/