当我将 URL 分配给图像元素时，我需要显示加载图标。我已经查看了该站点上的其他问题，这些问题仅详细介绍了如何在加载页面时为图像显示优雅的预加载器。我需要的是在页面加载后显示预加载器。我正在寻找的内容有两种情况，我在下面进行了解释。
我动态创建一个 DOM 图像元素并为该元素分配一个 URL。这样做时，在元素上显示图像大约需要 2-3 秒，并且在这 2-3 秒内该区域变为空白。我需要做的是显示一个预加载图标并在加载图像后将其隐藏。
我动态创建一个 DIV 图像元素并将一个 URL 分配给background:url(). 这样做时，在元素上显示图像大约需要 2-3 秒，并且在这 2-3 秒内该区域变为空白。我需要做的是显示一个预加载图标并在加载图像后将其隐藏。
如何实现在这两种情况下显示预加载器？
您可以使用 load() 事件来完成。
当您第一次开始加载时，更改您的图像以显示预加载器，或者您想要这样做。此外，将“加载”事件附加到它。
然后，加载图像后，删除预加载器并显示图像。
您需要对与 CSS 相关的技巧（背景网址）执行类似的技巧。您可以做的是直接加载图像（通过创建一个new Image()），同时将背景 url 设置为您的预加载器图标。
然后，加载图像后，进行切换。由于浏览器只加载一次图像，无论它在哪里使用，它应该具有相同的效果。
有一个很好的教程和截屏视频：http: //jqueryfordesigners.com/image-loading/
虽然在某些浏览器（如旧版本的 IE）中 .load() 函数对图像效果不佳，但在这种情况下，您可以使用：https ://github.com/JessThrysoee/jquery.imageload而不是 .load () 以获得更一致的跨浏览器体验。