jquery - 如何在 div #content 加载时显示 div #loading

Question

我想实施一个解决方案，其中：

1. 在加载 div #content 中的内容时，
2. 隐藏 div #content，
3. 显示 div #loading，
4. 然后当 div #content 已加载时，
5. 隐藏 div #loading，
6. 淡入 div #content

我试过了：

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

这是我正在研究的jsfiddle：

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

谢谢你。

Answer 1

根据.load()，事件应该触发，当

当元素和所有子元素都已完全加载时，加载事件将发送到该元素。此事件可以发送到与 URL 关联的任何元素：图像、脚本、框架、iframe 和窗口对象。

因此，您不能将加载事件处理程序绑定到div标签。当您希望事件处理程序在图像加载后触发时，您必须将其绑定到图像

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

或者您可以将事件绑定到window对象，该对象在

页面已完全加载，包括图形。

JS：

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

JSFiddle

第三种方法是在加载事件触发时测试是否加载了所有图像

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

Answer 2

例如，在您通过 JSON 或 Ajax 或 Javascript 从 CODEBEHINF 接收数据后，您必须在 DIV 中填写图片，您可以更改它

  $('#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
       });

Answer 3

使用类加载器获取 div

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


}