在Firefox中等待图像加载时如何制作图像

Question

I'm having this issue with firefox, works perfectly on chrome.

I'm creating a slide gallery, and the user can click next or previous to switch between the images in the gallery. I'm trying to create a loading image in-between switching images while the user is waiting for the actually image to loading. The code I have currently to do this as follows:

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

So the logic in there is pretty simple. Load the "Loading Image" when switching between images, when the "Loading Image" has finished loading then start loading in the "Actual Image". When the actual image is completed loading then it should be displayed.

In firefox all that happens is that the image will hang on the previous image while the next image is loading and when the next image is loaded it will display the new image. But the "Loading Image" never gets displayed/shown.

I've also tried to just out right hide the image until it is loaded and on the onLoad unhide it again. But all that happens is the Image will just hang on the previous image until the current image is loading, never actually hiding the image.

And all of these techniques work perfectly fine on chrome. Can someone help me out on how to get this to work on firefox or knows of a better way?

Answer 1

The problem is that your logic is operating on the same image element. Loading images are supposed to be separate from the image that's used to display stuff.

Here's code that loads a new image on the image element, and while that happens,we display the loading image somewhere until the other loads.

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