0

How can I display a loading icon while image change event is taking place. (without jQuery)

I'm new to the Stack Overflow community and also the coding world so please bear with me. I have done many searches on this site and beyond but could not find a solution to this specific situation.

I’ve added some code into a weebly webpage (example down below) that changes a still image to an animated GIF on mouseover, and back to the same still image on mouseout. The image change works properly but since the GIF is fairly large it takes a while to load. And once on mouseover there is no indication that the image is loading. I am having trouble adding an effect to let the user (primarily myself) know that the image is currently loading. I’ve searched around online and found many ways to make css loading animations, or to add a loading icon to a single image on page load, just cant find a way to add it during the image change.

I have tried:

  • Css image animation as loader (Works great, can’t figure out where to add it)

  • Loader as a css background image . The still image does not disappear to
    expose loader in background on mouseover.

  • Adding a div with a loader over top the image but the image element does not register mouseover through the “loader” div.

  • Using buttons as start/stop and animating them during the load

And many more approaches with no success.

I know I could have the GIF preload in the background but since there are mutiple images it would eat up too much data on mobile. Also the images are constantly updating so storing them locally is not an option. After searching google and stack overflow for weeks on end (not to mention too many coding tutorials) I can't seem to find a solution that does not involve jquery. I would like to avoid jquery due to my lack of knowledge in it, and also it seems difficult to implement into weebly's embeded html box. I am hoping to accomplish this task with a combo of html, css, and javascript if possible.

Here is an example of the code I am working with below. The code is placed in a embedded html box on a Weebly webpage. I am willing to completely abandon the code if there is a better way to add a loading icon to an image change without jquery.

<img id="pleasework" 
 src="STILL IMAGE URL HERE"  
 class="picswap"
 alt="not working"

 onmouseover="document.getElementById('pleasework')
 .src='GIF IMAGE URL HERE'" 

 onmouseout="document.getElementById('pleasework')
 .src='STILL IMAGE URL HERE'" 
/>

Essentially I would just like to sneak in a loading icon or something of equal effect between the still and GIF images. It may be a simple fix but I can't quite figure it out. It would almost be embarrassing to tell you how much time I spent on this specific task… Just need a little direction on where to go with this one.

P.S. This is my first post on Stack Overflow so please let me know if my question is posed improperly or if I’m missing something. Thanks for your time.

1
  • Still open for other suggestions if anyone has a different way of accomplishing this. Preferably without static timeout.
    – AstroMax
    Jan 21, 2017 at 3:29

1 Answer 1

0

Well one easy way to do this while keeping jQuery out of the equation would be to position a div containing the loader icon above the image you want to swap, with a css display attribute of none.

<div>&nbsp;<img src="someloader.gif" id="ourLoaderGif" style="display: none;" /></div>

Now we can use a little vanilla JS and setTimeout to achomplish this transition from image to loader to image. The nbsp above will stop the div collapsing when the loader becomes hidden. Without it, when you toggle display of the loader, your layout will seem jumpy instead of being fluid.

function imageOnMouseEnter() {
  //How long to show the loader for in ms (eg enough time on average for your image to change)
  var imageLoadTime = 1000;

  //Show the loader
  document.getElementById('ourLoaderGif').style.display = '';

  //Change the original image src
  document.getElementById('pleasework').src = 'IMAGE-URL-HERE.png';

  //Set the timeout on the spinner
  setTimeout('hideLoader()', imageLoadTime);
}

function hideLoader() {
  document.getElementById('ourLoaderGif').style.display = 'none';
}

The only draw back to this solution is currently we are using a static variable for our time interval instead of the dynamic time from the actual image change, but at the very least this should point you in the right direction!

2
  • Not quite what I was looking for but it does the job and answers my question. Code did need a bit of tweaking. Just had to add onmouseenter ="imageOnMouseEnter()" in between the mouseover and mouseout handlers for it to work. Thanks for the help and quick response.
    – AstroMax
    Jan 19, 2017 at 8:32
  • Im glad you got it working to fully suit your needs dude! Jan 20, 2017 at 6:45

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.