javascript - (window).load 预加载站点并提供中止选项

Question

使用PreLoadMe预加载简单的静态网站。如果加载不知何故需要很长时间，最好添加链接，这可以中止(而不是停止)加载，以便用户至少可以在看到某些内容时等待。

JS

$(window).load(function() {
        $('#status').fadeOut();
        $('#preloader').delay(350).fadeOut('slow');
    })

HTML

<div id="preloader">
    <div id="status">&nbsp;</div>
    <a href="#">Leave the loading, I want to see the site!</a>
</div>

CSS

#preloader {
    position: fixed;
    top:0;left:0;
    right:0;bottom:0;
    background-color:#fff;
    z-index:9999; /* makes sure it stays on top */
}

我确实渴望帮助。提前致谢!

Answer 1

只需将点击事件绑定(bind)到您想要关闭叠加层的链接并在点击时隐藏它:

$('#preloader').on('click', '.btn-close', function() {
    $('#preloader').hide();
});

改进的 HTML(最好表示与某些类的紧密链接，例如 .btn-close):

<div id="preloader">
    <div id="status">&nbsp;</div>
    <a href="#" class="btn-close">Leave the loading, I want to see the site!</a>
</div>

演示:http://jsfiddle.net/uj6m1eh6/