如何在网站内容加载时显示加载屏幕

我正在一个包含大量mp3和图像的网站上工作,我想在所有内容加载时显示加载gif.

我不知道如何实现这一点,但我确实有我想要使用的动画GIF.

有什么建议？

通常是通过ajax加载内容并监听readystatechanged事件以使用加载GIF或内容更新DOM 来执行此操作的站点.

您目前如何加载内容？

代码与此类似:

function load(url) {
    // display loading image here...
    document.getElementById('loadingImg').visible = true;
    // request your data...
    var req = new XMLHttpRequest();
    req.open("POST", url, true);

    req.onreadystatechange = function () {
        if (req.readyState == 4 && req.status == 200) {
            // content is loaded...hide the gif and display the content...
            if (req.responseText) {
                document.getElementById('content').innerHTML = req.responseText;
                document.getElementById('loadingImg').visible = false;
            }
        }
    };
    request.send(vars);
}

  
    
    
  
  
    

      

        

          
Please wait while this page is loading...

        
      
    
    

        
        Final content.