Rishi Rishi - 7 days ago 5
CSS Question

Display loader on load event and remove the loader when background image is loaded

I have two divs.
1 : where background image is loaded
2 : where loader gif is loaded.

what I want is , when there is a

window.load()
event is called then loader gif should displayed , and when background image is fully loaded , then loader gif should be removed. that's what I want to achieve.



$(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://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<div class="gif_loader_image"></div>
<div class="background_image_div">
</div>





Thank you.

Answer

instead of $(window).load(function (){ do a $( document ).ready(function() { as,

$( document ).ready(function() {
  // Handler for .ready() called.
  $('.background_image_div').load(function(){
     $('.gif_loader_image').hide();
  });
});

EDIT Caveats of the load event when used with images as taken from here, .load API

EDIT 2 try a poller, keep polling and check for the image inside the div using .length > 0. Do some changes to your html,

Keep a div and then an image tag inside it with this structure, <div id="backgroundImageDiv"><img src="whatEverTheURLIs" id="backgroundImageID"></div>

Inside your poller check if $("#backgroundImageDiv > #backgroundImageID").length() > 0

If the condition satisfies, hide the gif loader using .hide(). Check for the syntaxes please.

By poller I mean an interval timer.