Как обеспечить загрузку изображений внутри плагина JQuery?

При создании подключаемого модуля JQuery, требующего размеров изображения, я обнаружил, что браузеры webkit, такие как Chrome, часто возвращают 0 размер для изображений, потому что они загружаются параллельно.

Мое быстрое и грязное решение состояло в том, чтобы обернуть код, который вызывает мой плагин, в событие $(window).load():

$(document).ready(function() {
    $(window).load(function() {
        $('.magnifier').magnifier();
    });
});

Как мне реализовать это внутри самого плагина? Каков самый чистый способ определить, что изображения загружены, чтобы я мог измерить их размеры?


plugins image google-chrome jquery webkit
person Soviut    schedule 16.08.2009    source источник

Ответы (2)


arrow_upward
3
arrow_downward

Изображения имеют событие load(), поэтому вы можете сделать что-то вроде:

$(document).ready(function() {
    $('.magnifier').magnifier();
});

$.fn.magnifier = function() {
    return this.each(function() {
        $(this).find('img').load(function() {
            // do something to image when it is loaded
        });
    });
}

Вы также можете просто обернуть код вокруг window.load внутри самого плагина:

$.fn.magnifier = function() {
    var that = this;
    $(window).load(function() {
        that.each(function() {
            $(this).find('img').each(function() {
                // image would be loaded at this point
            });
        });
    });
    return this;
}
person Paolo Bergantino    schedule 16.08.2009

arrow_upward
1
arrow_downward

Я не уверен, что полностью понимаю, но это сработает после загрузки всех изображений.

$("img").load(function() { 

});
person Andy Gaskell    schedule 16.08.2009