jquery - 在页面加载时显示 HTML 代码

Question

我想在加载页面内容时显示 HTML 代码。我尝试了几种方法，但无法让它发挥作用。

我想在页面加载时显示这段代码:

<div class="spinner"></div>
    <div class="double-bounce1"></div>
    <div class="double-bounce2"></div>
</div>

Answer 1

你只需要将预加载器放在内容的顶部，html 中也有错误，这里是工作示例:http://jsfiddle.net/20ovsb7n/

此处使用了 Jquery，因此如果尚未包含，您需要添加它。我会展示:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="path/to/your/jquery.js"><\/script>'); /script>

1) 将预加载器放在内容顶部的 css:

.preloader {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #FFF;
    z-index: 9999;
}

2) 添加 js 以在页面完全加载(包含图像等)后删除该预加载器

$(window).load(function () {
    $('.spinner').fadeOut(600);
});

注意:有时由于加载问题和其他原因无法触发加载事件，因此我们必须设置最大加载时间，例如 4 秒的时间限制:

function preloaderhide() {
    $('.spinner').fadeOut(600);
}

$(window).load(function () {
   preloaderhide();
});

window.setTimeout(preloaderhide,4000);

现在让我们隐藏滚动条直到页面加载以防止用户滚动:

http://jsfiddle.net/20ovsb7n/5/

$(document).ready(function() {
    $('body').css("overflow","hidden");
});

改变preloaderhide()

function preloaderhide() {
    $('body').css("overflow","auto");
    $('.spinner').fadeOut(600);
}

最新的 FIDDLE 更新:http://jsfiddle.net/20ovsb7n/7/