Show loader image until the background image is completely loaded

Question

I am trying to implement a loader for a background image until the whole image is completely loaded using jquery. I have tried the various method to do this. Since the image is specified in the CSS I could not specify the exact image id or class. Finally I end up doing this ,

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

But doing this it is happening when the window is loaded. I wanted to happen it until the image is completely loaded. And the background image comes under the following section

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

It would be great if somebody give a helping hand to manage this case. Thanks in advance.

Answer 1

Maybe you could use a multiple background-image

example:

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>

The Gif background remains here but is painted behi,d the big image. It is seen as long as the big image is not loaded ...