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

Question

У меня есть два div. : где фоновое изображение загружается : где погрузчик GIF загружен.

что я хочу, когда есть window.load() события называется то погрузчик 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(); 
    }); 
}); 

EDIT Предостережения мероприятия нагрузки при использовании с изображениями, как принятые здесь, .load API

EDIT 2 попробовать Poller, держать опрос и проверка изображения внутри div с помощью .length > 0. Есть ли какие-то изменения в вашем HTML,

Держите DIV, а затем тег изображения внутри него с этой структурой, <div id="backgroundImageDiv"><img src="whatEverTheURLIs" id="backgroundImageID"></div>

Внутри чеке Poller если $("#backgroundImageDiv > #backgroundImageID").length() > 0

Если условие удовлетворяет, скрыть GIF загрузчик с помощью .hide(). Проверьте синтаксисы, пожалуйста.

Поллиллер я имею в виду интервал таймера.

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 это не удивительно, что ваш код не работает.Вы должны теперь использовать метод .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(); 
});