javascript - 显示加载程序图像，直到背景图像完全加载

Question

我正在尝试为背景图像实现一个加载器，直到使用 jquery 完全加载整个图像。我已经尝试了各种方法来做到这一点。由于图像是在 CSS 中指定的，因此我无法指定确切的图像 ID 或类。最后，我最终这样做了，

$(window).load(function() {
   $(".loader").fadeOut("slow");
})

但是这样做是在加载窗口时发生的。我想在图像完全加载之前发生它。背景图片位于以下部分

<div class="loader"></div>
    <div class="test_banner services_banner">
</div>

如果有人伸出援助之手来处理此案，那就太好了。提前致谢。

Answer 1

也许你可以使用多个背景图像

例子:

div {
  height:90vh;
    width:90vw;
  background:url(http://lorempixel.com/1200/800/nature/) center,
    url(http://www.jqueryscript.net/demo/Simple-Customizable-jQuery-Loader-Plugin-Center-Loader/img/loader1.gif) center center no-repeat ;/* this works once/untill image has been loaded */

<div></div>

Gif 背景保留在这里，但绘制在大图像后面。只要不加载大图就可以看到...