Question

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

我想在页面加载时显示此代码：

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

Answer 1

做它的动态。是最好的（而且我认为是独特的）方式。

您的页面将加载该代码以及将使用Ajax加载索引的JavaScript代码。加载Ajax后，它会在文档中写入resusts或做任何你喜欢的事情。

您可以从这里开始：http://w3schools.com/jquery/jquery_ajax_intro.asp

您可以使用第二个index2.html文件作为主文件，index.html将使用Ajax加载该文件。这是初步的，但将按预期工作。使用模板系统就不那么简单了，比如开源网络软件（论坛等等），但这是另一个问题。

有些浏览器在加载所有内容之前不会呈现网页，因此使用网站中嵌入的预加载器将无法按预期工作，另一方面，此代码可在任何启用了JavaScript的浏览器中使用。

顺便说一下，在加载所有内容之前没有呈现网站的浏览器是当前使用的浏览器百分比的极小部分。

Answer 2

你只需要将预加载器放在内容的顶部，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/

在页面加载时显示HTML代码

2 个答案: