Question

我想要实施一个解决方案：

虽然div #content中的内容正在加载，
隐藏div #content，
show div #loading，
然后当div #content加载时，
隐藏div #loading，
淡入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()，事件应该在

时触发

当加载事件和所有子元素已完全加载时，会将事件发送到元素。此事件可以发送到与网址相关联的任何元素：图片，脚本，框架，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

例如，首先你必须在DIV中填充图片在您通过JSON或Ajax或Javascript从CODE BEHIND收到您的数据后，您可以更改它

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


}

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

3 个答案: