Load images before showing a div

Question

I have never asked anything on this forum before so I'll try to be as clear as possible. I am trying to show a loading screen while the contents of a div is loading in my website.

I tried to use jQuery .load() function but it seems not to work. It works when i use the .ready() function but i want to load all the images before to show the div.

So the div is hidden (style="display:none;")

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="loading"> // loading screen </div>
<div id="divtoshow" style="display:none;"> //images and text </div>

<script>
$("#divtoshow").load(function(){
  $("#loading").fadeOut(200);
  $("#divtoshow").fadeIn(200);
});
//if i replace load with ready it works
</script>

Answer 1

You want to do stuff specifically when all the images on the page have loaded.Try this custom jQuery event...

/**
 * Exposes an event called "imagesLoaded" which is triggered 
 * when all images on the page have fully loaded.
 */
(function($) {
    var loadImages = new Promise(function(done) {
        var loading = $("img").length;
        $("img").each(function() {
            $("<img/>")
                .on('load', function() {
                    loading--;
                    if (!loading) done();
                })
                .on('error', function() {
                    loading--;
                    if (!loading) done();
                })
                .attr("src", $(this).attr("src"))
        });
    });
    loadImages.then(function() {
        $(document).trigger({
            type: "imagesLoaded"
        });
    });
})(jQuery);

It works by copying each image (in the event they are already loaded, this is necessary to catch the load event) and listening for the load on the copy. I got the idea from here.

Here is a fiddle.

Answer 2

If you want to use the .load() method you need to bind it to the img element not to the container:

$("#divtoshow img").on('load', function(){
  $("#loading").fadeOut(200, function(){
    $("#divtoshow").fadeIn(200)
  })
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="loading">Loading</div>
<div id="divtoshow" style="display:none;"><img src="http://lorempixel.com/350/150"><h1>My Text</h1></div>

Answer 3

If you want the page contents to load before transitioning to display the main page div then you want to us the fundamental document.ready pattern:

<div id="loading"> // loading screen </div>
<div id="divtoshow" style="display:none;"> //images and text
<img src='...a path to a large file....'/>
</div>

and then

<script>
$(document).ready(function() {
  $("#loading").fadeOut(200);
  $("#divtoshow").fadeIn(200);
});
</script>

In general, if you are doing any element (DOM) manipulation using JQuery and you do NOT havethe document.ready() pattern in place then you should ask yourself if you should maybe add it in. Particularly if you develop with local assets because when you shift to production and network latency has an impact you may find timing issues cause odd bugs in code that worked perfectly when all assets were local.

Answer 4

CSS

#loading {
   width: 100%;
   height: 100%;
   top: 0;
   left: 0;
   position: fixed;
   display: block;
   opacity: 0.7;
   background-color: #fff;
   z-index: 99;
   text-align: center;
}

#loading-image {
  position: absolute;
  top: 100px;
  left: 240px;
  z-index: 100;
}

HTML

<div id="loading">
  <img id="loading-image" src="images/ajax-loader.gif" alt="Loading..." />
</div>

JAVASCRIPT

<script language="javascript" type="text/javascript">
     $(window).load(function() {
     $('#loading').hide();
  });
</script>

Answer 5

The load() method was deprecated in jQuery version 1.8 and removed in version 3.0. you can use window on.load function OR you can also follow the DaniP answer. Here is an example with preloader.
One more problem you are trying to load the #divtoshow which is already display none. So you need to load something that inside on that div

$(window).on('load', function() {
  $("#loading").fadeOut();
    $("#divtoshow").fadeIn(300);
});

#divtoshow {
display: none;
  text-align: center;
}
 #loading{
   position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  width: 150px;
  height: 150px;
  margin: -75px 0 0 -75px;
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid #3498db;
  width: 120px;
  height: 120px;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}

@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
/* Add animation to "page content" */
.animate-bottom {
  position: relative;
  -webkit-animation-name: animatebottom;
  -webkit-animation-duration: 1s;
  animation-name: animatebottom;
  animation-duration: 1s
}

@-webkit-keyframes animatebottom {
  from { bottom:-100px; opacity:0 }
  to { bottom:0px; opacity:1 }
}

@keyframes animatebottom {
  from{ bottom:-100px; opacity:0 }
  to{ bottom:0; opacity:1 }
}
.img-responsive{
width:100%;
height:auto;
display:block;
margin:0 auto;
}

  

    <div id="loading"></div>
    <div  id="divtoshow" class="animate-bottom">
 <img src="http://orig10.deviantart.net/f6bf/f/2007/054/1/9/website_banner_landscape_by_kandiart.jpg" class="img-responsive" alt="banner "/>
    <h2> loaded Title!</h2>
    <p>Some text and Image in my newly loaded page..</p>
   
  </div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>