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;
}

如何在等待图像加载到Firefox时加载图像

1 个答案: