Question

我正在学习如何编码，我想将加载页面链接到我的HTML，但它似乎没有工作。我从here获得了我的代码，但它似乎根本不起作用。如果你们能找出问题，那就太好了。

这是截至目前的代码：

dotted circle

Answer 1

我没找到你的代码。

所以这是一个示例方法。

页面加载时，图像将显示在页面中间，整个页面处于透明背景中。因此，每当您的页面被加载时，然后将隐藏的类添加到该图像div。

创建2个类，一个是隐藏div。

.hidden{
display:none;
}

第二个显示图像。

.show_image{
position:fixed;top:0;right:0;bottom:0;left:0;
background: rgba(0,0,0,0.5) url(/img/spinner.gif) no-repeat 50% 50%;
z-index:100;
background-size: 5ex;
}

您的HTML代码将是

<div class="show_image"></div>
<div class="hidden box"> Your actual content </div>

最初，您的内容将处于隐藏状态，并且将显示加载图像。

完成页面加载后，只需切换隐藏的类。

$('.box').removeClass("hidden");
$('.show_image').addClass("hidden");

您可以使用加载功能来了解页面是否已完全呈现。

 $(window).load(function() {
    //everything is loaded
});

这样您的内容就会变得可见，并且加载图片会被隐藏。

如果您需要有关页面加载的任何帮助，请告诉我们。

Answer 2

你可以尝试这个：

function onReady(callback) {
    var intervalID = window.setInterval(checkReady, 1000);

    function checkReady() {
        if (document.getElementsByTagName('body')[0] !== undefined) {
            window.clearInterval(intervalID);
            callback.call(this);
        }
    }
}

function show(id, value) {
    document.getElementById(id).style.display = value ? 'block' : 'none';
}

onReady(function () {
    show('page', true);
    show('loading', false);
});

DEMO HERE

将加载页面插入HTML / CSS？

2 个答案: