Обратный вызов загрузочной функции jQuery

Question

Я хочу иметь возможность выполнять обратный вызов функции .load(), когда элемент создан - элемент изображения. Код работает, загружая новый элемент изображения этим кодом:

$('<img />').load(function()
{
    var img = this;
    $('.block-wrap img').fadeOut('slow', function()
    {
        $(this).replaceWith(img);
    });
}).attr('src', loadurl);

Но я хочу продолжить, когда изображение было загружено и заменено. Вот как мне это нужно для работы:

$('<img />').load(function()
{
    var img = this;
    $('.block-wrap img').fadeOut('slow', function()
    {
        $(this).replaceWith(img);
    });
}).attr('src', loadurl);

$('.block-wrap input.imageheight').val($('.block-wrap img').height());
$('.block-wrap input.imagewidth').val($('.block-wrap img').width());

Возвращает высоту первого изображения (не изображение, которое было заменено, которое является загрузочным изображением счетчика), поэтому мне нужно, чтобы оно могло получать высоту и ширину изображения, когда оно полностью загружено в DOM. Жаль, что .replaceWith() не имеет метода обратного вызова, но я не могу использовать функцию обратного вызова на .load(), так как он не будет работать из-за того, что это функция, которая была передана через функцию .load().

Answer 1

Он возвращает неправильные размеры изображения, потому что $('.block-wrap img').height() и $('.block-wrap img').width() называются до того, как .load() завершится.

Вы можете поместить эти две строки в обратный вызов load (после .replaceWith), чтобы они ссылались на правильное изображение.

$('<img />').load(function()
{
    var img = this;
    $('.block-wrap img').fadeOut('slow', function()
    {
        $(this).replaceWith(img);
        $('.block-wrap input.imageheight').val($('.block-wrap img').height());
        $('.block-wrap input.imagewidth').val($('.block-wrap img').width());
    });
}).attr('src', loadurl);

Answer 2

Я не на 100% по этому поводу, но не могли бы вы добавить событие загрузки в конец replaceWith?IE:

$(this).replaceWith(img).load(function(){

   $('.block-wrap input.imageheight').val($('.block-wrap img').height());
   $('.block-wrap input.imagewidth').val($('.block-wrap img').width());

});