Home/ Questions/Q 6185815
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-24T01:46:49+00:00

I am using the following script to display big images on mouse over the

  • 0

I am using the following script to display big images on mouse over the small images (example photo attached in the last). I want to show the ‘loading’ image (like this) while the big image is being downloaded from the server. How can this be achieved?

Note: I have asked a similar question here but I was not successful in applying the append function to the following code. Please help.

<script type="text/javascript">
    function showIt(imgsrc)
    {
        var holder = document.getElementById('imageshow');
        var newpic= new Image(); 
        newpic.src=imgsrc;
        holder.src=imgsrc;
        holder.width = newpic.width;
        holder.height=newpic.height;
    }
</script>

<body>
     /***on hover, xyz.jpg will be replaced by bigA.jpg and so on***/
     <img src="smallA.jpg" onMouseOver="showIt('bigA.jpg')"/> 
     <img src="smallB.jpg" onMouseOver="showIt('bigB.jpg')"/>

     <img src="xyz.jpg" id="imageshow" />         
</body>

enter image description here

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Images have a load event. As long as you set the load handler before the image.src is set, you should get notified when the image has successfully loaded or encounters some kind of error in loading. I do that very thing in a slideshow that I wrote so I know when the next image is ready for display and I display a wait cursor (animated gif like you’re wanting) if the image has been delayed more than one second beyond it’s appointed display time so the user knows what’s going on.

    In general, you can do something like this:

    function loadImage(url, successHandler, errorHandler) {
    var myImg = new Image();
    myImg.onload = myLoadHandler;      // universally supported
    myImg.onabort = myErrorHandler;    // only supported in some browsers, but no harm in listening for it
    myImg.onerror = myErrorHandler;
    myImg.src = url;

    function myLoadHandler() {
        successHandler(myImg, url);
    }

    function myErrorHandler() {
        if (errorHandler) {
            errorHandler(url);
        }
    }

}

    Using code like this, you can display the wait cursor when you initiate the image load and hide it when the successHandler gets called.

    If there were any other listeners to these events, then you should use addEventListener or attachEvent instead of onload, onabort, onerror, but if there’s only one listener, you can go either way.

    If the desired images are known in advance, then it’s sometimes a better user experience (less waiting) to preload images that may be used later. This gets them into the browser’s memory cache so they will appear instantly when needed. One can preload images either in HTML or in JS. In HTML, just insert tags into the web page for all the desired images (but hide them with CSS). In JS, just create an image array and create the image objects:

    // image URLs to preload
var preloadImageURLs = [
    "http://photos.smugmug.com/935492456_5tur7-M.jpg",
    "http://photos.smugmug.com/835492456_968nf-M.jpg",
    "http://photos.smugmug.com/735492456_3kg86-M.jpg",
];

var preloads = [];   // storage for preloaded images

function preloadImages() {
    var img, i;
    for (i = 0; i < preloadImageURLs.length; i++) {
        img = new Image();
        img.src = preloadImageURLs[i];
        preloads.push(img);
    }
}

    This will cause all the images in the preloadImageURLs array to be preloaded and available instantly later on in the life of the web page, thus preventing any user delays while waiting for images to be loaded. Obviously, there’s a short amount of time for the preloaded images to actually get loaded, but for smallish images that usually happens before the user interacts with the web page so it makes for a faster feel to dynamic parts of the web page that use images.

    • 0