javascript - 在加载事件上显示加载器并在加载背景图像时移除加载器

Question

我有两个 div。 1 :加载背景图片的位置 2 :加载loader gif的地方。

我想要的是，当调用 window.load() 事件时，应该显示 loader gif，当背景图像完全加载时，然后 < strong>loader gif 应该被删除。这就是我想要实现的目标。

$(window).load(function (){
    $('.background_image_div').load(function(){
      $('.gif_loader_image').hide();
    });
});

// this code is not working.

.background_image_div{
        background: url(http://www.banneredge.com/images/portfolio.jpg);
        width: 600px;
        height: 300px;
        margin: 0 auto;
        border: thin black solid;
        z-index: 900;
    }

    .gif_loader_image{
        position: absolute;
        width: 50px;
        height: 50px;
        background: url(https://media0.giphy.com/media/3oEjI6SIIHBdRxXI40/200_s.gif);
     //   border: thin red solid;
        left: 55%;
        bottom: 15%;
        z-index: 1001;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="gif_loader_image"></div>
<div class="background_image_div">
</div>

谢谢。

Answer 1

而不是 $(window).load(function (){做一个$( document ).ready(function() {作为，

$( document ).ready(function() {
  // Handler for .ready() called.
  $('.background_image_div').load(function(){
     $('.gif_loader_image').hide();
  });
});

编辑 与从此处获取的图像一起使用时加载事件的注意事项，.load API

编辑 2 尝试轮询器，继续轮询并使用 .length > 0 检查 div 内的图像.对您的 html 做一些更改，

保留一个 div，然后在其中使用此结构保留一个图像标签，<div id="backgroundImageDiv"><img src="whatEverTheURLIs" id="backgroundImageID"></div>

在你的轮询器中检查是否 $("#backgroundImageDiv > #backgroundImageID").length() > 0

如果条件满足，使用 .hide() 隐藏 gif 加载器.请检查语法。

轮询器是指间隔计时器。