0

情况：
我正在寻找一个 jquery/ajax 加载器，发现这个线程很有帮助。
现在我用这个小提琴作为我的装载机。
一切正常，但我只有一个担心。
在 js 代码下方，“responseTime”固定为 2.5 秒。

$.mockjax({ url: "/mockjax", responseTime: 2500 });

因此，如果我的页面加载时间超过 5 秒，加载程序仅运行 2.5 秒。

问题：
我如何将加载器的时间依赖于我的页面不可预测的加载时间？

非常感激你的帮助。谢谢！

4

2 回答 2

0

您可以显示加载程序 gif，直到窗口完全加载

$(window).load(function(){

}

并这样做：

$(window).load(function(){
    $('#cover').fadeOut(1000); 
});
#cover {
    background: url("http://www.aveva.com/Images/ajax-loader.gif") no-repeat scroll center center #FFF;
    position: absolute;
    height: 100%;
    width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="cover"></div>
<img src="https://i.ytimg.com/vi/lklDJ5VRQao/maxresdefault.jpg" />

它将以显示 gif 开始，一旦内容完全加载，它将淡出。

于 2017-05-17T06:26:13.110 回答
0


我从这个网站 找到了我要找的东西。

下面是我使用的代码。

$(document).ready(function(){
    $("#spinner").bind("ajaxSend", function() {
        $(this).show();
    }).bind("ajaxStop", function() {
        $(this).hide();
    }).bind("ajaxError", function() {
        $(this).hide();
    });
 
    $('#button-upload').click(function() {
        $('#spinner').show();
    });
 });
.spinner {
    position: fixed;
    top: 50%;
    left: 50%;
    margin-left: -50px;
    margin-top: -50px;
    text-align:center;
    z-index:1234;
    overflow: auto;
    width: 100px;
    height: 102px; 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div id="spinner" class="spinner" style="display:none;">
    <img id="img-spinner" src="http://sampsonresume.com/labs/pIkfp.gif" alt="Loading"/>
</div>


<input type = "submit" value = "Upload" id="button-upload" />

加载程序在此代码段中是不确定的，但它在我的网站上完美运行。
无论如何，谢谢大家的帮助=）

于 2017-05-17T06:59:05.983 回答