Javascript 如何显示页面加载html文件，直到页面加载完成？

我需要一个不同的页面加载器文件（如：

loader.html

），其中我只有

loader.gif

图像，带有一些css样式，不在同一个

index.html

文件中。因此，现在我想在加载

index.html

文件之前加载它，我想显示我的

loader.html

文件，如果我加载了所有内容，则隐藏

loader.html

文件并显示

index.html

文件内容。 希望你明白我的意思，请帮忙：）

我尝试了以下代码：

$(window).load(function(){
    if($("body").load("loader.html").fadeOut(5000)){
        $("loader.html").hide();
        $("index.html").show();
    }
});

您可以这样做：

在页面加载中，根据需要在一些

中显示您的

.gif

或加载程序

.html

进行ajax调用以加载html

完成ajax后，调用hide/remove.

gif/loader.html

并显示您的

index.html

这可能会解决您的问题。

您可以这样做：

在页面加载中，根据需要在一些

中显示您的

.gif

或加载程序

.html

进行ajax调用以加载html

完成ajax后，调用hide/remove.

gif/loader.html

并显示您的

index.html

这可能会解决你的问题

试试这个 在document.load函数（）上显示加载程序。 在document.ready函数（）上隐藏加载程序`

试试这个 在document.load函数（）上显示加载程序。 在document.ready函数（）上隐藏加载程序`

.load（url[，数据][，完成]）

.load（url[，数据][，完成]）

---

jQuery

$(document).ready(function () {
    //for demo, I used timer for 3 second
    var timer = window.setTimeout(requestPage, 3000);

    function requestPage(){
        sendRequest("index.php", function(sResponse){
            clearTimeout(timer);
            //clear everything everything in body HTML
            //change inner html with sResponse
            $("body").children().fadeOut(300, function(){
                $(this).remove();
                $("body").html(sResponse)
            });
        });
     }

    function sendRequest(url, oncomplete){
       $.ajax({
         url: url,
         type: 'POST',
         dataType: 'html',
         cache: false,
         timeout: 60000,
         complete: function(e, xhr, opt) {
            if(typeof oncomplete === "function") oncomplete(e.responseText);
          }
       });
    }
});

HTML

<div class="loader"><img src="loader.gif" /> <em>Loading page. Please wait...</em></div>

加载页面。请稍候。。。

---

希望您能提供帮助

$(document).ready(function () {
    //for demo, I used timer for 3 second
    var timer = window.setTimeout(requestPage, 3000);

    function requestPage(){
        sendRequest("index.php", function(sResponse){
            clearTimeout(timer);
            //clear everything everything in body HTML
            //change inner html with sResponse
            $("body").children().fadeOut(300, function(){
                $(this).remove();
                $("body").html(sResponse)
            });
        });
     }

    function sendRequest(url, oncomplete){
       $.ajax({
         url: url,
         type: 'POST',
         dataType: 'html',
         cache: false,
         timeout: 60000,
         complete: function(e, xhr, opt) {
            if(typeof oncomplete === "function") oncomplete(e.responseText);
          }
       });
    }
});

HTML

<div class="loader"><img src="loader.gif" /> <em>Loading page. Please wait...</em></div>

加载页面。请稍候。。。

---

希望您能提供帮助

为什么要加载两组不同的html文件。我的建议是加载index.html文件并开始显示loader.gif，然后在后台等待加载其他资源。完成后，您可以隐藏加载程序。@Ashok，什么是

窗口。onload

在

ajax

完成之前调用…？@Ashok是的，先生，您是对的，但我想用不同的方式尝试一下。您能帮帮忙吗？@RaviSah随心所欲地做（加载两个不同的html文件）根本不是一个好主意。加载第一个页面会浪费大量时间，然后您将被迫通过XMLHttpRequest加载第二个页面，并替换第一个页面（全部使用JavaScript），这是不必要的、不安全的和缓慢的。我不认为任何开发人员会给你如何做的建议：就像问警察如何抢劫银行。这是什么？你想隐藏什么？show

$（“loader.html”）.hide（）$（“index.html”）.show（）使用此代码？；）为什么要加载两组不同的html文件。我的建议是加载index.html文件并开始显示loader.gif，然后在后台等待加载其他资源。完成后，您可以隐藏加载程序。@Ashok，什么是
窗口。onload
在
ajax
完成之前调用…？@Ashok是的，先生，您是对的，但我想用不同的方式尝试一下。您能帮帮忙吗？@RaviSah随心所欲地做（加载两个不同的html文件）根本不是一个好主意。加载第一个页面会浪费大量时间，然后您将被迫通过XMLHttpRequest加载第二个页面，并替换第一个页面（全部使用JavaScript），这是不必要的、不安全的和缓慢的。我不认为任何开发人员会给你如何做的建议：就像问警察如何抢劫银行。这是什么？你想隐藏什么？show
$（“loader.html”）.hide（）$（“index.html”）.show（）使用此代码？；）谢谢，我喜欢这个方法。