如何在等待图像加载到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; 
}