Как показать загрузочное изображение 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(); 
}