如何在加载网站内容时显示加载屏幕 [英] How to display a loading screen while site content loads

问题描述

我正在一个网站，其中包含一大堆mp3和图像，我想显示一个加载gif，而所有的内容加载。

我不知道如何实现这一点，但我有动画gif我想使用。

有任何建议吗？

解决方案

内容，并通过 readystatechanged 事件监听并加载GIF或内容来更新DOM。

 
 
 
 
 $ b。 
 //请求您的数据... 
 var req = new XMLHttpRequest（）; 
 req.open（POST，url，true）; 
 
 req.onreadystatechange = function（）{
 if（req.readyState == 4&& req.status == 200）{
 //加载内容。 ..hide的gif并显示内容... 
 if（req.responseText）{
 document.getElementById（'content'）。innerHTML = req.responseText; 
 document.getElementById（'loadingImg'）。visible = false; 
} 
} 
}; 
 request.send（vars）; 
} 
  

有很多第三方javascript库可能会使你的生活更轻松，上面是你真正需要的。

I'm working on a site which contains a whole bunch of mp3s and images, and I'd like to display a loading gif while all the content loads.

I have no idea how to achieve this, but I do have the animated gif I want to use.

Any suggestions?

解决方案

Typically sites that do this by loading content via ajax and listening to the readystatechanged event to update the DOM with a loading GIF or the content.

How are you currently loading your content?

The code would be similar to this:

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);
}

There are plenty of 3rd party javascript libraries that may make your life easier, but the above is really all you need.

这篇关于如何在加载网站内容时显示加载屏幕的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！