如何在图像更改事件发生时显示加载图标。 （没有 jQuery）

Question

如何在图像更改事件发生时显示加载图标。 （没有 jQuery）

我是 Stack Overflow 社区和编码界的新手，所以请 忍受我。我在此站点及其他站点上进行了多次搜索，但找不到针对这种特定情况的解决方案。

我在一个 weebly 网页中添加了一些代码（下面的示例），它在鼠标悬停时将静止图像更改为动画 GIF，并在鼠标悬停时返回相同的静止图像。图像更改工作正常，但由于 GIF 相当大，因此需要一段时间才能加载。一旦鼠标悬停，就没有迹象表明图像正在加载。我无法添加效果以让用户（主要是我自己）知道图像当前正在加载。我在网上搜索了很多方法来制作css加载动画，或者在页面加载时为单个图像添加加载图标，只是找不到在图像更改期间添加它的方法。

我试过了：

• Css 图像动画作为加载器（效果很好，不知道在哪里添加）

• 加载器作为 css 背景图像。静止图像不会消失到
  在鼠标悬停时在后台公开加载程序。

• 在图像上方添加带有加载器的 div，但图像元素不会通过“加载器”div 注册鼠标悬停。

• 在加载过程中使用按钮作为开始/停止并为其设置动画

还有更多没有成功的方法。

我知道我可以在后台预加载 GIF，但是 由于有多个图像，它会在移动设备上消耗太多数据。 此外，图像会不断更新，因此不能将它们存储在本地。在连续数周搜索谷歌和堆栈溢出之后（更不用说太多的编码教程），我似乎找不到不涉及 jquery 的解决方案。由于我缺乏知识，我想避免使用 jquery，而且似乎很难在 weebly 的嵌入式 html 框中实现。如果可能的话，我希望用 html、css 和 javascript 的组合来完成这项任务。

下面是我正在使用的代码示例。代码放置在 Weebly 网页上的嵌入式 html 框中。如果有更好的方法可以在没有 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'" 
/>

基本上我只想在静态图像和 GIF 图像之间插入一个加载图标或具有同等效果的东西。这可能是一个简单的修复，但我无法弄清楚。告诉你我花了多少时间在这个特定的任务上几乎是令人尴尬的……只需要一个关于这个任务的方向的小方向。

附：这是我在 Stack Overflow 上的第一篇文章，所以如果我的问题提出不当或遗漏了什么，请告诉我。感谢您的宝贵时间。

Answer 1

在不考虑 jQuery 的情况下，一种简单的方法是在要交换的图像上方放置一个包含加载器图标的 div，css 显示属性为 none。

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

现在我们可以使用一点香草 JS 和 setTimeout 来完成从图像到加载器再到图像的转换。当加载器隐藏时，上面的 nbsp 将停止 div 折叠。没有它，当您切换加载程序的显示时，您的布局将显得跳跃而不是流畅。

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

此解决方案的唯一缺点是目前我们使用静态变量作为时间间隔，而不是实际图像更改的动态时间，但至少这应该为您指明正确的方向！