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

Question

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

我是Stack Overflow社区的新手，也是编码世界的新手 忍受我。我在这个网站上做了很多搜索，但找不到这种特定情况的解决方案。

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

我试过了：

• Css图片动画作为加载器（效果很好，无法找出添加位置）

• Loader as css background image。静止图像不会消失到
  在mouseover上背景中暴露加载器。

• 在图像顶部添加带有加载程序的div，但图像元素不会通过“loader”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图像之间相同的效果。这可能是一个简单的修复，但我无法弄明白。告诉你我花在这个特定任务上的时间几乎是尴尬的...只需要一个方向来指导这个问题。

P.S。这是我关于Stack Overflow的第一篇文章，所以如果我的问题提出不当或者我错过了什么，请告诉我。谢谢你的时间。

Answer 1

在保持jQuery不等式的同时，一个简单的方法是将包含加载器图标的div放在要交换的图像上方，css显示属性为none。

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

现在我们可以使用一点vanilla JS和setTimeout来完成从图像到加载器到图像的转换。当加载程序被隐藏时，上面的内容将停止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';
}

这个解决方案的唯一回归是目前我们在时间间隔使用静态变量而不是实际图像变化的动态时间，但至少这应该指向正确的方向！