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.