Question

我希望发生以下行为。

1）用户点击我网站上的链接

2）我显示的文字说下一页正在加载

3）然后用户转到下一页。

4）如果用户点击“返回”转到原始页面，则说明加载的文本不再存在。

我不知道如何实施＃4。我已经尝试过window.onbeforeunload，但无法让它正常工作。

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" lang="en">
    <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <title>My website</title>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
        <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
    </head>
    <body>
    <div id="loadingDiv" style="display:none;">
        This should show when I click on link. This should not show when users leaves this page and then clicks back.  
    </div> 

    <script>
    $(function() {
        $('.button').click(function() {
            $('#loadingDiv').show();
        });        
    });
    </script>

    <br><br>
    <a class="button" href="http://www.google.com">Open google</a>

    </body>
    </html>

Answer 1

它与您尝试过的完全不同，但经过一些修改后，您可以拥有与此相同的功能。它在更改页面时添加了一些不错的小AJAX动画;触发了一个黑暗但不透明的叠加div和一个加载div，每个都有固定的位置。

jquery

$('a.animate').click(function(){
    var href = $(this).attr('href'),
    toLoad = href+' #main-content';
    $('#overlay').show();
    $('#loader').show();
    $('#page-content').hide();
    $('#main-content').load(toLoad,'', function(){
        $('#main-content').show('fast',function(){
            $('#loadingDiv').hide('slow',function(){
                $('#overlay').hide();
            });
        });
    });
    window.location = href;
    return false;
});

html

<div id="loader" class="bubblingG">
<img src="your-ajax-img" style="height: 100%; width: 100%"/>
</div>
<div id="overlay"></div>

<div id="main-content">
    <div id="page-content">
    <!-- your page content goes here-->
    </div>
</div>

css

#loader {
    position: fixed;
    z-index: 999;
    top: 50%;
    left: 50%;
    margin-top: -31.5px;
    margin-left: -50px;
    height: 63px;
    width: 100px;
    display: none;
}
#overlay{
    position: fixed;
    z-index: 995;
    top: 0px; right: 0px; bottom: 0px; left: 0px;
    background: #333;
    opacity: 0.4;
    display: none;
}

注意您无法在#loader内嵌套#overlay，或者它会从#overlay继承不透明度。这是CSS的已知问题，因此您必须使用z-index和常规定位方法自行定位它，以防止#loader div中出现不透明。

Answer 2

您可以延迟隐藏加载程序：

$('.button').click(function() {
  // show just 2 sec
  $('#loadingDiv').show().delay(2000).hide();
});

Javascript / Jquery：显示和隐藏加载屏幕消息

2 个答案: