javascript - 如何在发生图像更改事件时显示加载图标。 (没有 jQuery)

Question

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

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

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

我试过:

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

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

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

• 使用按钮作为开始/停止并在加载期间为它们设置动画

还有很多方法都没有成功。

我知道我可以在后台预加载 GIF 但是 由于有多个图像，它会在移动设备上消耗太多数据。 此外，图像会不断更新，因此无法将它们存储在本地。在 google 和 stack overflow 连续搜索了数周之后(更不用说太多的编码教程)我似乎找不到不涉及 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';
}

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