在获取内容时显示加载器块/图像加载器答案

【问题标题】：Show Loader Block / Image Loader whilst content is fetched在获取内容时显示加载器块/图像加载器
【发布时间】：2011-06-04 03:46:06
【问题描述】：

好吧，不完全是 ajax。

但是我们会启动一个模态窗口，它会立即启动。模态的内容从我们的 dB 中获取数据，在连接良好的情况下加载大约需要 3 秒。

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

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

所以：

等等等等等等 ...

变成...

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

标签： javascript jquery html

【解决方案1】：

如果您不介意为此使用插件，您可以查看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，关闭加载动画的最简单方法是使用 jQuery 将回调附加到 iframe 的 load 事件：

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

【讨论】：

抱歉忙着 CSS 处理这件事。是的，基本上我们启动了一个模态，并在其中加载一个 iframe，这样我们就可以添加 js 和 css 来显示客户端 vCard。我只是没有得到监听器事件，我有这些好主意但没有能力。我们的编码员会在星期一回来向他们展示您的代码，我希望能完成......并且看起来很聪明！哼哼哈哈欢呼

【解决方案2】：

好的，我最终管理它，并认为我会分享代码。这仅涉及我们的使用，因此您需要根据您的页面修改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;}

就在我添加的

标签下方：

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

而就在上面我添加的标签：

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

显然我们使用 jquery 库，所以也加载你的库。图片 loading.gif 的路径会因您的网站而异。

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

步骤

【讨论】：