显示加载程序块/图像加载程序，同时提取内容

但是我们启动了一个模式窗口，它直接启动。模态的内容从我们的dB中提取数据，并且需要大约3秒钟才能加载。

我想要做的是将整个内容包装在一个加载器div中。

我认为是正确的术语...

所以：

< DIV ID = “主要内容”> 等等...等等...等等... </DIV>

变为... < DIV CLASS = “内容加载器”>

< div id="main content" > 
    blah ... blah ... blah ... 
</div>

</DIV>

我相信，我们不得不解雇一个开放的事件，并成功close事件......（我不是专家的js，你可以告诉）

正在读：http://malsup.com/jquery/block/

我没有得到的是，我们的代码不会通过ajax获取。它是通过查询

所以我们应该如何设置这个... 如果我们没有loader.gif，我们不会感到困扰。

也许是覆盖了50％，50％位于加载消息模态的全尺寸..

我收集这种工作方式是网页不知何故监测活动，并在活动完成装载消息消失。

好的，所以很好，但是......我遇到的一个问题是，我们可能会从第三方网站的图像中抽取，因此加载程序肯定会等待该ping成功。我们可以改变什么，其实装载机是高兴...即只用HTML，等等等等

任何例子将是巨大的欢呼声

来源

2011-06-04 422

如果你不介意使用这个插件，你可能有一个看看jquery-loading，这使得整个过程如下：

$.loading({ 
    onAjax: true, 
    align: 'center', 
    img: 'jquery-loading/loading.gif', 
    mask: true 
});

这假设你使用标准的jQuery AJAX函数（$.ajax(),$.get()等），你声称你不是。如果不是通过AJAX（一个iframe，可能？）在模式窗口中加载查询，我有点困惑，但如果需要，您可以删除onAjax:true参数并手动调用$.loading()以启动覆盖+微调器，然后在完全加载内容时致电$.loading(false)。在这种情况下，您需要通过侦听'load'事件或通过为您返回HTML调用函数来加载内容时执行回调函数。

编辑：关闭，如果您使用的是iframe中加载动画的最简单方法是将回调附加到iframe的load事件使用jQuery：

$('#my_iframe').load(function() { 
    $.loading(false); 
});

来源

2011-06-04 03:56:57 nrabinowitz

对不起，很忙CSS这件事情。是的，基本上我们启动一个模式，并在其中加载一个iframe，以便我们可以添加js和css，以显示客户端vCard。我只是没有听到听众的事件，我有这些伟大的想法，但没有能力。我们的程序员在周一回来后会向他们展示您的代码，我希望能够完成...并且看起来很聪明！何哼哈哈欢呼 – 422 2011-06-04 05:27:38

看我的编辑 - 这很简单。 – nrabinowitz 2011-06-04 06:21:11

好，我管理它到底，并认为我会分享代码。这仅适用于我们的用法，因此您需要根据您的页面修改CSS。

好的CSS：

#loading-container {position: absolute; top:50%; left:50%;} 
#loading-content {width:600px; text-align:center; margin-left: -300px; height:50px; margin-top:-25px; line-height: 50px;} 
#loading-content {font-family: "Helvetica", "Arial", sans-serif; font-size: 18px; color: black; text-shadow: 0px 1px 0px white; } 
#loading-graphic {margin-left: 280px; margin-bottom:-2px;} 
#loading {background-color: #eeeeee; height:100%; width:100%; overflow:hidden; position: absolute; left: 0; top: 0; z-index: 99999;}

略低于< body>标签我说：

<div id="loading"> 

    <script type = "text/javascript"> 
     document.write("<div id='loading-container'><p id='loading-content'>" + 
         "<img id='loading-graphic' width='16' height='16' src='images/ajax-loader.gif' /> " + 
         "Loading...</p></div>"); 
    </script> 

</div>

，略高于</body>标签我说：

<!-- LOADING SCRIPT --> 
<script> 
$(window).load(function(){ 
    $("#loading").fadeOut(function(){ 
     $(this).remove(); 
     $('body').removeAttr('style'); 
    }); 
}); 
</script> 
<!-- LOADING SCRIPT -->

很显然，我们使用jquery库，以便加载你的。图片loading.gif的路径取决于您的网站。

希望这可以帮助任何人在加载内容时寻找简单的页面加载器图形。

Ste

来源

2011-06-05 02:23:52 422

显示加载程序块/图像加载程序，同时提取内容

回答

相关问题