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

Question

在为图像元素分配URL时，我需要显示一个加载图标。 我看了本网站上的其他问题，这些问题仅详细介绍了如何在加载页面时显示优美的图像预加载器。 我需要的是在页面加载后显示预加载器。 我正在寻找的场景有2种，下面将进行解释。

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

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

如何实现在两种情况下都显示预加载器？

Answer 1

您可以通过使用load（）事件来实现。

第一次开始加载时，请更改图像以显示预加载器，或者您要这样做。 另外，将“加载”事件附加到该事件。

然后，一旦加载了图像，请删除预加载器并显示该图像。

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

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

Answer 2

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

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