javascript - 如何在页面加载时显示正在加载的 gif 图像

Question

我想在页面加载时加载 gif 图像。我试过这样的事情

<div id="loading"></div>
<div id="content"> Html Content Here ... </div>
<style>
    div#content {
    display: none;
    }

div#loading {
    top: 200 px;
    margin: auto;
    position: absolute;
    z-index: 1000;
    width: 160px;
    height: 24px;
    background: url(<?php echo Yii::$app->getUrlManager()->getBaseUrl(); ?>/loading.gif) no-repeat;
    cursor: wait;
    }

</style>
<script>
      function preloader(){
            document.getElementById("loading").style.display = "none";
            document.getElementById("content").style.display = "block";
        }//preloader
        window.onload = preloader;
</script>

但是没有用。页面重新加载时没有显示 gif 图像。

Answer 1

我不确定您正在做的事情能否实现您想要的。您正在隐藏然后立即显示您想要在页面加载时显示的图像？然后在页面加载后调用它。试试这个:

function myOnload() {
    // You should pre-set the style in css for this element, you don't need to
    // explicitly show it. The element will be hidden on page load.
    document.getElementById("loading").style.display = "none";
}

// It's better practice to not override global onload state.
var old_onload = window.onload;

// Load your function.
window.onload = function() {
    myOnload();
    if (typeof(old_onload) === 'function') old_onload();
}