CODEWITHSUNDEEP
jqueryhtmlloading
user1063287
user1063287

Reputation: 10869

how to show div #loading whilst div #content loads

i am wanting to implement a solution where:

  1. whilst contents in div #content are loading,
  2. hide div #content,
  3. show div #loading,
  4. then when div #content has loaded,
  5. hide div #loading,
  6. 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.

Upvotes: 5

Views: 29708

Answers (3)

Mana
Mana

Reputation: 1

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");
          }
   });


}

Upvotes: -1

Olaf Dietsche
Olaf Dietsche

Reputation: 74028

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

Upvotes: 9

Alireza Masali
Alireza Masali

Reputation: 688

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
       });

Upvotes: 0

Related Questions