Question

我对我制作的Javascript文件有疑问。它确保超链接在div中打开而不是在新选项卡中打开。但是，我还在页面加载时显示了一个非常简单的文本包含。

    $(document).ready(function () {
    $('a').on('click', function(e){
        e.preventDefault();
        var page_url = $(this).prop('href');
        var loading = 
        $('#content')
        .html('<h2>The page is loading. A second please.</h2>')
        .load(page_url);
    });
});

但是，某些页面的加载速度比其他页面快得多。换句话说，在某些页面中使用此脚本非常有用，但是当页面立即加载时，它只是非常烦人。

是否可以测量'加载'所需的时间，因此，是否显示html？（我在考虑类似的事情：“如果时间加载＆gt; 1000 .html（'blabla'）/ Else”）。

Answer 1

你可以这样做：

var timer = setTimeout(function() {
    $('#content').html('<h2>The page is loading. A second please.</h2>');
    timer = null;
}, 1000);
$('#content').load(page_url, function() {
    if (timer) {
        clearTimeout(timer);
    }
});

Answer 2

对于其他googlers，我将上述评论和答案结合起来提供了解决方案。我做的是以下内容：如果页面在一秒钟内加载，而不是不显示加载消息，我确保它至少显示至少一秒：

$(document).ready(function () {
$('a').on('click', function(e){
    e.preventDefault();
    $('#content').html("<div id='status' class='status'></div>");
    $('#status').html('<h2>The page is loading. A second please.</h2>');
    var page_url = $(this).prop('href');
    var loadingMsg = setTimeout(function(){
            $('#content').load(page_url, function (){
                clearTimeout(loadingMsg);
                $('#status').html();
            });
        },1000);
    });
});

我这样做的原因是因为我无法使超时功能保持一致。有时它工作得很好，但有时屏幕只是冻结，在页面加载之前没有显示任何内容。现在，它至少显示一秒，如果加载更多，它将显示，直到页面加载。感谢您的回答，我希望这对有类似问题的人有帮助！

测量Jquery中的加载时间

2 个答案: