Question

我有两个div。 1 ：加载背景图片的位置 2 ：加载了加载程序gif 。

我想要的是，当有window.load()事件被调用时，应显示 loader gif ，当背景图像完全加载时，加载器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 id="backgroundImageDiv"><img src="whatEverTheURLIs" id="backgroundImageID"></div>

保留div，然后在其中保留图像标记

在轮询器内检查$("#backgroundImageDiv > #backgroundImageID").length() > 0

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

通过poller我的意思是间隔计时器。

Answer 2

你可以这样做。请看这个链接

<div class="feature"><div class="loader"><img src="http://www.ajaxload.info/cache/FF/FF/FF/00/00/00/1-0.gif"></div></div>


$(function(){
    var bgimage = new Image();      
    bgimage.src="http://cdn.wonderfulengineering.com/wp-content/uploads/2016/01/nature-wallpapers-10.jpg";       

    $(bgimage).load(function(){
        $(".feature").css("background-image","url("+$(this).attr("src")+")").fadeIn(2000);   
            $(".loader").hide();
    });
});

http://jsfiddle.net/n4d9xxon

Answer 3

您可以尝试这样：

$(document).ready(function (){
  $('.gif_loader_image').fadeOut(1000);
});

body{
  background: url(http://www.banneredge.com/images/portfolio.jpg);
  width: 100%;
  height: auto;
}
.gif_loader_image{
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0px;
  bottom: 0px;
  z-index: 1001;
  background:rgba(0,0,0,.8);
  text-align:center;
}
.gif_loader_image img{
  width:30px;
  margin-top:40%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="gif_loader_image">
  <img src="https://media0.giphy.com/media/3oEjI6SIIHBdRxXI40/200_s.gif" alt="Loader..."/>
</div>
<div class="background_image_div"></div>

Answer 4

主要问题是您的$(window).load甚至无法解雇

<强>为什么

自从.load()方法被jQuery 3完全删除后，这项工作无法完成，并且由于您使用的是版本3.1.1，因此您的代码并没有让您感到惊讶39;工作。您现在必须使用.on()方法来实现相同的效果

所以

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

会变成

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

<强>通知

由于您在开始时已经有$(window).load功能，因此您不必再为背景图像定义它，因为只有当所有图像都完全加载时才会触发此方法，所以我认为如果这也应该做到这一点。

<强>的jQuery

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

在加载事件时显示加载程序，并在加载背景图像时删除加载程序

4 个答案: