只有在執行完先前的陳述後才能開始的陳述

Question

這裏是初學者問題。我正在使用JavaScript和jQuery構建照片查看器。

當您單擊箭頭查看下一張圖片時，我想讓當前圖片淡出，然後下一張圖片淡入。我得到的問題是，如果圖片花了一點時間才能加載，當我開始淡入淡出的時候，我已經把舊照片留在那裏，所以我需要確保在新照片加載之前淡入不會進入。

所以這三個語句必須運行，如果以前已經執行每一個僅執行：

$('#image').fadeOut(500); 
getImage(); 
$('#image').fadeIn(500); 

這裏是我的功能來獲得新的形象：

getImage = function() { 
    document.getElementById("image").src = "Images/Image" + counter + ".jpg"; 
} 

哪裏計數器我之前聲明的變量在點擊「下一步」按鈕等時得到更新...

所以，不知道那麼多關於編程，我正在尋找一種方式Ø確保

$('#image').fadeIn(500); 

不運行，除非新的圖像已被提取或發生的事情是，舊的形象開始在那麼我們得到的新的衰落。

我打電話試圖回來，就像這樣：

$('#image').fadeOut(500, function() { 
     getImage(); 
}); 

$('#image').fadeIn(500); 

但是，這並不工作，你會需要一個秋天的後備之內回來，我不知道如何做到這一點。

我已經試過的另一件事是做這樣的事情：

var hasloaded = $('#image').fadeOut(500, function() { 
    getImage(); 
}); 

if (hasloaded) 
{$('#image').fadeIn(500);} 

這也不行，雖然我還以爲我被真正聰明的，當我寫的。

任何幫助表示讚賞。

謝謝。

Answer 1

您可以創建一個JavaScript Image對象，並在load事件設置src目標元素

$('#image').fadeOut(500, function() { 
    getImage(function() { 
     $('#image').fadeIn(500); 
    }); 
}); 

getImage = function (cb) { 
    var img = new Image(); 
    img.onload = function() { 
     document.getElementById("image").src = img.src; 
     cb(); 
    }; 
    img.src = "Images/Image" + counter + ".jpg"; 
} 

---

使用promise()

$('#image').fadeOut(500, function() { 
    getImage().then(() => { 
     $('#image').fadeIn(500); 
    }); 
}); 

getImage = function() { 
    return new Promise((resolve, reject) => { 
     var img = new Image(); 
     img.src = "Images/Image" + counter + ".jpg"; 
     img.onload = function() { 
      document.getElementById("image").src = img.src; 
      resolve("Success!"); 
     }; 
    }); 
}