如何在等待圖像加載到Firefox中時加載圖像

Question

我遇到了Firefox的這個問題，在Chrome上完美工作。

我正在創建幻燈片庫，用戶可以單擊下一個或上一個在庫中的圖像之間切換。我正在嘗試在用戶正在等待加載實際圖像時在切換圖像之間創建加載圖像。我目前的代碼如下：

function changePicture() 
    { 
      var imagevar = document.getElementById('theimage'); 

      //display loading image 
      imagevar.src = "/img/LoadingPage.png"; 

      //Load actual Image 
      var imgURL = <IMAGE PATH> 
      imagevar.onload = ShowImage(imgURL);  
    } 

    function ShowImage(imgURL) 
    { 
     var imagevar = document.getElementById('theimage'); 
     imagevar.src = imgURL; 
    } 

所以這裏的邏輯非常簡單。在圖像之間切換時加載「加載圖像」，當「加載圖像」完成加載後，開始加載到「實際圖像」中。當實際圖像完成加載時，應該顯示它。

在Firefox中所發生的一切是圖像將前面的圖像上懸掛而下一個圖像加載和下一個圖像加載時會顯示新的圖像。但「加載圖像」永遠不會顯示/顯示。

我也試過只是將圖像隱藏起來，直到它被加載並且onLoad再次取消隱藏。但是，所發生的只是圖像將掛在前一張圖像上，直到當前圖像加載完畢，從未真正隱藏圖像。

而所有這些技術在鉻上工作得很好。有人可以幫助我如何讓這個工作在Firefox或知道更好的方法嗎？

Answer 1

問題是你的邏輯運行在同一個圖像元素上。加載圖像應該與用來顯示內容的圖像分開。

以下是圖像元素上加載一個新的形象代碼，而出現這種情況，我們在其他地方顯示加載圖片，直至其他負載。

function showGalleryImage(path){ 
    //get our placeholder 
    var theImage = document.getElementById('theimage'); 

    //show our loading image. usually overlaying theImage 
    showLoadingImage(true); 

    //set our handler to check if loaded 
    theImage.onload = function(){ 
    //when loaded, hide 
    showLoadingImage(false); 
    } 

    //start loading the new image 
    theImage.src = path; 
} 

function showLoadingImage(state){ 
    //get our loading image placeholder 
    var loadingImage = document.getElementById('loadingImage'); 

    //set our display states 
    var displayState = state ? 'block' : 'none'; 
    loadingImage.style.display = displayState; 
}