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

Question

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

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

有什么建议吗？

Answer 1

通常是通过 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);
}

有很多第 3 方 javascript 库可以让您的生活更轻松，但以上就是您真正需要的。