0

我在使用 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 上再次取消隐藏它。但所发生的只是图像将一直挂在前一个图像上，直到当前图像加载，而不是真正隐藏图像。

所有这些技术都可以在 chrome 上完美运行。有人可以帮我解决如何让它在 Firefox 上运行或知道更好的方法吗？

4

1 回答 1

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;
}
于 2013-04-21T15:23:29.197 回答