Показывать изображение загрузчика, пока фоновое изображение не будет полностью загружено

#javascript #jquery #html #css #image

#javascript #jquery #HTML #css #изображение

Вопрос:

Я пытаюсь реализовать загрузчик для фонового изображения, пока все изображение не будет полностью загружено с помощью jquery. Я пробовал различные методы для этого. Поскольку изображение указано в CSS, я не смог указать точный идентификатор изображения или класс. Наконец, я заканчиваю тем, что делаю это ,

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

Но при этом это происходит при загрузке окна. Я хотел, чтобы это происходило до тех пор, пока изображение не будет полностью загружено.
И фоновое изображение находится в следующем разделе

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

Было бы здорово, если бы кто-нибудь помог справиться с этим делом. Заранее спасибо.

1. Рассмотрите возможность использования любого из lazyload плагинов. Не нужно изобретать велосипед.

2. Пожалуйста, опубликуйте полный пример (например, jsfiddle) с разметкой и css. Не могу себе представить, как это выглядит и как это должно выглядеть.

3. Возьмите фоновое изображение из CSS, создайте новое изображение с тем же именем файла, и когда оно будет загружено, Удалите загрузчик и т. Д.

Ответ №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 остается здесь, но окрашен в соответствии с большим изображением. Это видно до тех пор, пока не загружено большое изображение …

1. Спасибо за вашу помощь. Я попробовал ваше предложение. Но при выполнении этого он показывает пошаговую загрузку изображения. Я хотел показать основное изображение только после полной загрузки. Точно так же, как заменить загрузчик изображением.

2. @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>