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背景仍然留在这里，但画的是behi，大图像。只要没有加载大图像就可以看到...

Answer 2

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Create a "Please Wait, Loading..." Animation</title>
<style>
    .overlay{
        display: none;
        position: fixed;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        z-index: 999;
        background: rgba(255,255,255,0.8) url("http://www.jqueryscript.net/demo/Simple-Customizable-jQuery-Loader-Plugin-Center-Loader/img/loader1.gif") center no-repeat;
    }
    body{
        text-align: center;
    }
    /* Turn off scrollbar when body element has the loading class */
    body.loading{
        overflow: hidden;   
    }
    /* Make spinner image visible when body element has the loading class */
    body.loading .overlay{
        display: block;
    }
</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
// Initiate an Ajax request on button click
$(document).on("click", "button", function(){
    // Adding timestamp to set cache false
    $.get("/examples/php/customers.php?v="+ $.now(), function(data){
        //$("body").html(data);
    });       
});

// Add remove loading class on body element depending on Ajax request status
$(document).on({
    ajaxStart: function(){
        $("body").addClass("loading"); 
    },
    ajaxStop: function(){ 
        $("body").removeClass("loading"); 
    }    
});
</script>
</head>
<body>
    <button type="button">Get Customers Details</button>
    <div class="overlay"></div>
</body>
</html>

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

2 个答案: