如何在从远程服务器加载映像时显示预加载程序

Question

当我为图像元素分配URL时，我需要显示一个加载图标。我看了这个网站上的其他问题，其中只详细介绍了如何在加载页面时为图像显示优雅的预加载器。我需要的是在加载页面后显示预加载程序。有两个方案，我正在寻找，我已经解释了以下。

1. 我动态地创建一个DOM元素，并为这个元素分配一个URL。在这样做时，显示元素上的图像大约需要2-3秒，该区域在这2-3秒内为空白。我需要做的是显示一个预加载图标，并隐藏它一旦图像已经加载。
2. 我动态地创建了一个DIV图像元素，并将一个URL分配给background:url()。在这样做时，显示元素上的图像大约需要2-3秒，该区域在这2-3秒内为空白。我需要做的是显示一个预加载图标，并隐藏它一旦图像已经加载。

如何实现显示这两种场景的预加载器？

Answer 1

您可以通过使用load()事件来完成这一任务。

当您第一次开始加载时，更改您的图像以显示预加载程序，或者您想要做的任何事情。此外，附加一个“加载”事件到它。

然后，加载图像后，删除预加载程序并显示图像。

对于CSS相关的部分(后台url)，您需要做一个类似的技巧。您可以做的是直接加载图像(通过创建一个new Image())，同时将背景url设置为预加载器图标。

然后，一旦图像被加载，就进行切换。由于浏览器只加载一次图像，而不管它在何处使用，它应该具有相同的效果。

Answer 2

关于这一点，有一个很好的教程和屏幕显示在：http://jqueryfordesigners.com/image-loading/

虽然在某些浏览器中(像早期的IE版本)，.load()函数对于图像的工作效果并不好，但在这种情况下，您可以使用：https://github.com/JessThrysoee/jquery.imageload而不是.load()来获得更一致的跨浏览器体验。