JQuery - функция вызова после загрузки изображения

Question

Итак, у меня есть две функции. Один для загрузки изображения, а другой - для изменения его элемента контейнера. Естественно, элемент изображения нужно загружать, прежде чем можно будет произвести какие-либо измерения. Это выглядит примерно так:

var imgEl; 

loadImage(imgSrc); 
// only call the below, once the above has finished loading and appending the image. 
resizeModal(); 

function loadImage(imgSrc) { 
    var image = new Image(); 
    image.src = imgSrc; 
    image.onload = function() { 
     imgEl = $('<img src='+image.src+'/>'); 
     imgEl.prependTo(modal); 
    } 
} 

function resizeModal() { 

    // Do stuff based off the imgEl once it's been loaded and appended 
    var width = imgEl.width(); 
    modal.width(width) 

} 

Я попытался с помощью $ .Deferred, но я, видимо, что-то отсутствует, как «B» всегда получает вошедшего прежде, чем «А»:

var imgEl; 

loadImage(imgSrc).done(resizeModal()) 

function loadImage(imgSrc) { 

    var def = $.Deferred(); 

    var image = new Image(); 
    image.src = imgSrc; 
    image.onload = function() { 
     imgEl = $('<img src='+image.src+'/>'); 
     imgEl.prependTo(modal); 

     console.log("A"); 
     def.resolve(); 

    } 

    return def; 
} 

function resizeModal() { 

    console.log("B"); 

    // Do stuff based off the imgEl once it's been loaded and appended 
    var width = imgEl.width(); 
    modal.width(width) 

} 

Answer 1

Это потому что вы явным вызовом resizeModalперед тем обещание решить:

loadImage(imgSrc).done(resizeModal()) 

Так же, как с foo(bar()), это будет позвоните по номеру resizeModal и передайте его возвращаемое значение до done().

Вы хотите передать саму функцию вместо:

loadImage(imgSrc).done(resizeModal) 

В основном это означает, что «вызов resizeModal как только вы сделали».

Answer 2

var loadImage = function(imgSrc, callback) { 
    var imgEl; 
    var image = new Image(); 
    image.src = imgSrc; 
    image.onload = function() { 
     imgEl = $('<img src='+image.src+'/>'); 
     imgEl.prependTo(modal); 
    } 
    callback(imgEl); 
} 

var resizeModal = function(imgEl) { 
    // Do stuff based off the imgEl once it's been loaded and appended 
    var width = imgEl.width(); 
    modal.width(width) 
    return width; // or whatever you are trying to get from this. 
} 

var finalOutput = loadImage(imgSrc, resizeModal); 

Вы пробовали такую ​​структуру?