how to show div #loading whilst div #content loads

Question

i am wanting to implement a solution where:

whilst contents in div #content are loading,
hide div #content,
show div #loading,
then when div #content has loaded,
hide div #loading,
fade in div #content

i have tried:

html:

<div id="content">
<!--this stuff takes a long time to load-->
<img src="http://lorempixel.com/1920/1920/">
</div>
<div id="loading">
<!-- this is the loading gif -->
<img src="http://lorempixel.com/400/200/">
</div>

js:

// when user browses to page
$('#content').hide();
$('#loading').show();

// then when div #content has loaded, hide div #loading and fade in div #content
$('#content').bind('load', function() {
$('#loading').hide();
$('#content').fadeIn('slow');
});

here is the jsfiddle i am working on:

http://jsfiddle.net/rwone/Y9CQ4/

thank you.

+1 for jsfiddle. How do you load the content div? Is this an ajax call or really an image loading from the web server? — Olaf Dietsche, Jan 22 '13 at 09:07
the content is comprised of lots of html including images and content that is effected by jquery, it is all 'within' the document so to speak ie nothing is being pulled from a database etc. — user1063287, Jan 22 '13 at 09:12
Then your `bind('load')` should work as you've written. What is your problem? — Olaf Dietsche, Jan 22 '13 at 09:17
you can see on the fiddle that the #loading div is not being hidden and the #content div is not fading in after #content has loaded. — user1063287, Jan 22 '13 at 09:26

Olaf Dietsche · Accepted Answer · 2013-01-22T11:29:23.113

9

According to .load(), the event should fire, when

The load event is sent to an element when it and all sub-elements have been completely loaded. This event can be sent to any element associated with a URL: images, scripts, frames, iframes, and the window object.

So, you cannot bind the load event handler to a div tag. When you want the event handler to fire after the image has loaded, you must bind it to the image

HTML:

<div id="content">
<!--this stuff takes a long time to load-->
<img id="large" src="http://lorempixel.com/1920/1920/">
</div>
<div id="loading">
<!-- this is the loading gif -->
<img src="http://lorempixel.com/400/200/">
</div>

JS:

// when user browses to page
$('#content').hide();
$('#loading').show();

// then when the #content div has loaded
$('#large').bind('load', function() {
$('#loading').hide();
$('#content').fadeIn('slow');
});

JSFiddle

Or you can bind the event to the window object, which fires when

the page is fully loaded including graphics.

JS:

$(window).bind('load', function() {
$('#loading').hide();
$('#content').fadeIn('slow');
});

JSFiddle

Yet a third approach, would be to test if all images are loaded, when the load event fires

function allImagesLoaded() {
    var imgs = $(this).closest('div').find('img');
    var loaded = 0;
    imgs.each(function() { if ($(this.complete)) ++loaded; });
    if (imgs.length == loaded) {
        $('#loading').hide();
        $('#content').fadeIn('slow');
    }
}

// when user browses to page
$('#content').hide();
$('#loading').show();

// then when the #content div has loaded
$('#content img').bind('load', allImagesLoaded);

JSFiddle

edited Jan 22 '13 at 11:29

answered Jan 22 '13 at 09:33

Olaf Dietsche

72,253
8
102
198

hello, in test scenario (where #content contains lots of html including divs and images), how do i fire the event handler after all this content has loaded (not just one image)? thank you. – user1063287 Jan 22 '13 at 09:47
i tried binding it to body (thinking when everything in between the body tags loaded then it would be fired) but it didn't work. `$('body').bind('load', function() {` specifically i want it to be fired when everything in the #content div has loaded. thank you. – user1063287 Jan 22 '13 at 09:50
http://stackoverflow.com/questions/11071314/javascript-execute-after-all-images-have-loaded Basically you have a counter that increments every time an image has finished loading and act when the counter hits the total number of images. – JJJ Jan 22 '13 at 09:52
@user1063287 This is the same as with the `#content` div. When you call `bind()` on `#content` or `body`, both are already loaded, so this doesn't fire. – Olaf Dietsche Jan 22 '13 at 09:53
@Olaf Dietsche i tried wrapping #content div in a div called #large and then tried to specify that the event handler be triggered when everything in #large was loaded (ie including #content) with `$('#large').bind('load', function() {`, but this didn't work. is there a solution to this or is it an impossible situation? to clarify again, i want to fire the event handler after everything in #content has loaded. thank you. – user1063287 Jan 22 '13 at 09:59

score 0 · Answer 2 · answered Jan 22 '13 at 10:09

for example at fisrt u have to fill the Picture in the DIV after u recieved your data from CODEBEHINF by JSON or Ajax or Javascript u can change it

  $('#DIV').html('<img src="images/loadinfo.gif" />');//here u fill the picture in ur div
    $.get('Jquery.aspx', { command: 'CartLoader', Send_T: Send_T },
      function (response) {                
       $('#DIV').html(response);// after receiving  data from code behind u can change it
       });

score -1 · Answer 3 · edited May 12 '17 at 21:07

Take a div with class loader

CSS:

.loader {

    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background: url('images/loading.gif') 50% 50% no-repeat rgb(249,249,249);
    opacity: .7;
}

JS:

function myFunction() {

     $(".loader").show();

    Ajax Call({

//Ajax Call Operation

    success:function(result){

//Operation

}

complete: function(){

             $(".loader").fadeOut("slow");
          }
   });


}

how to show div #loading whilst div #content loads

3 Answers3

Linked