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

Question

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

1. 我动态创建DOM图像元素并为此元素分配URL。在这样做时，在元素上显示图像大约需要2-3秒，并且区域在2-3秒内变为空白。我需要做的是显示一个预加载图标，并在图像加载后隐藏它。

2. 我动态创建DIV图像元素并将网址指定给background:url()。在这样做时，在元素上显示图像大约需要2-3秒，并且区域在2-3秒内变为空白。我需要做的是显示一个预加载图标，并在图像加载后隐藏它。

如何在两种方案中显示预加载器？

Answer 1

您可以使用load（）事件来完成。

当您第一次开始加载时，请更改图像以显示预加载器，或者您想要执行此操作。另外，附加一个“加载”事件。

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

你需要为CSS相关的一个（背景网址）做类似的技巧。您可以做的是直接加载图像（通过创建new Image()），同时将背景URL设置为预加载器图标。

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

Answer 2

有一个很好的教程和截屏视频：http://jqueryfordesigners.com/image-loading/

虽然在某些浏览器中（如IE的旧版本），.load（）函数对图像效果不佳，在这种情况下，您可以使用：https://github.com/JessThrysoee/jquery.imageload代替.load（）一致的跨浏览器体验。