Jquery 如何在加载div#内容的同时显示div#加载

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

在加载div#content中的内容时

隐藏div#内容

显示分区加载

然后当div#content加载后

隐藏分区#加载

淡入div#内容

我试过：

html:

以下是我正在研究的JSFIDLE：

多谢各位

根据，事件应在

加载事件在元素和所有子元素完全加载后发送给元素。此事件可以发送到与URL相关联的任何元素：图像、脚本、帧、iFrame和窗口对象

因此，无法将加载事件处理程序绑定到

div

标记。如果希望事件处理程序在加载映像后启动，则必须将其绑定到映像

HTML:

或者，您可以将事件绑定到

窗口

对象，该对象在

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

JS:

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

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

---

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

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

$（'#DIV'）.html（''）//在这里，你将图片填入你的div
$.get（'Jquery.aspx'，{command:'CartLoader'，Send\u T:Send\u T}，
功能（响应）{
$（'#DIV'）.html（响应）；//从代码背后接收数据后，您可以更改它
});

使用类加载器进行div

CSS:

JS:

---

+1代表JSFIDLE。如何加载content div？这是一个ajax调用还是一个从web服务器加载的图像？内容由大量html组成，包括受jquery影响的图像和内容，可以说，它们都在文档中，即没有从数据库中提取任何内容等。然后您的

bind（'load'）

应该按照您编写的那样工作。你的问题是什么？你可以在小提琴上看到，加载的div没有被隐藏，内容加载后，#content div也没有消失。您好，在测试场景中（其中#content包含大量html，包括div和图像），在加载所有这些内容（而不仅仅是一个图像）后，我如何启动事件处理程序？谢谢。我试着把它绑定到body上（我想当body标签之间的所有东西都被加载时，它就会被触发），但是没有用<代码>$（'body'）。绑定（'load'，函数（）{特别地，我希望当#content div中的所有内容都已加载时触发它。谢谢。基本上，您有一个计数器，每次图像加载完成时都会递增，并在计数器命中图像总数时执行操作。@user1063287这与

#content

div相同。当您调用

bind（）时

在

#content

或

body

上，两者都已加载，因此不会触发。@Olaf Dietsche我尝试将#content div包装在一个名为#large的div中，然后尝试指定当#large中的所有内容都加载（即包括#content）时触发事件处理程序。

$（'#large'）。bind（'load'，function（）{

，但这不起作用。是否有解决方案，或者这是一种不可能的情况？再次澄清，我想在加载#内容中的所有内容后启动事件处理程序。谢谢。

<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>

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

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

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

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

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

function myFunction() {

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

    Ajax Call({

//Ajax Call Operation

    success:function(result){

//Operation

}

complete: function(){

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


}