显示加载器图像，直到背景图像完全加载答案

【问题标题】：Show loader image until the background image is completely loaded显示加载器图像，直到背景图像完全加载
【发布时间】：2016-09-29 14:12:54
【问题描述】：

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

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

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

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

如果有人帮忙处理这个案子，那就太好了。提前致谢。

【问题讨论】：

考虑使用任何lazyload 插件。无需重新发明轮子。
请发布带有标记和 css 的完整示例（例如 jsfiddle）。无法真正想象它是什么样子以及它应该是什么样子。
从 CSS 中获取背景图片，创建一个具有相同文件名的新图片，并在加载时移除加载器等。

标签： javascript jquery html css image

【解决方案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 */

&lt;div&gt;&lt;/div&gt;

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

【讨论】：

感谢您的帮助。我已经尝试过你的建议。但是在此之后，它正在逐步显示图像加载。我想要的是仅在完全加载后才显示主图像。就像用图片替换加载器一样。
@MuneerMuhammed，看起来像一个老问题，但渐进式（隔行扫描）jpg 避免了这种情况，它加载图像更快，然后增加分辨率直到完全加载以避免一点一点地显示它。 photoshop、gimp 和许多其他程序一样有这个选项。有 evn 在线工具：coding.tools/progressive-jpeg，imgonline.com.ua/eng/…，...

【解决方案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>

【讨论】：