Question

好吧，不完全是ajax。

但是我们发射了一个模态窗口，它可以直接射出。模态的内容从我们的dB中获取数据，并且在良好的连接上加载大约需要3秒钟。

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

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

所以：

＆LT; div id =“主要内容”＆gt; 等等等等等等 ... ＆LT; / div＆gt;

...变为＆LT; div class =“content-loader”＆gt;

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

＆LT; / div＆gt;

我相信我们必须发动公开赛和成功的近距离赛事......（我不是Js专家，你可以说）

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

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

那么我们应该如何设置呢...... 如果我们没有loader.gif。

，那就不会感到烦恼

可能覆盖了模态的完整大小，并且50％的50％定位加载消息..

我收集它的工作方式是页面以某种方式监视活动，当活动完成时，加载器消息消失。

好的，那很好，但是......我遇到的一个问题是，我们或许会在第三方网站的图片中扯眼，所以加载程序肯定会等待ping也能成功..或者可以我们改变了装载机实际上满意的东西......即只是html等等

任何例子都会很棒！

Answer 1

如果您不介意使用插件，可以查看jquery-loading，这使整个过程变得如此简单：

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

这假设您正在使用标准的jQuery AJAX函数（$.ajax()，$.get()等），而您声称不是这些函数。我对你在模态窗口加载查询的方式有点困惑，如果不是通过AJAX（可能是iframe），但如果你需要，你可以删除onAjax:true参数并手动调用{ {1}}启动overlay + spinner，然后在内容完全加载时调用$.loading()。在这种情况下，您需要一些方法来在加载内容时执行回调函数，方法是通过侦听$.loading(false)事件或让返回的HTML为您调用函数。

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

load

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

低于＆lt;身体＆gt;标签我添加：

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

就在上面＆lt; / body＆gt;标签我添加：

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

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

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

步骤

在获取内容时显示Loader Block / Image Loader

2 个答案: