Question

我需要一个不同的页面加载器文件（例如：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();
    }
});

Answer 1

你可以这样做：

在页面加载中，根据需要在某些.gif中显示您的.html或加载程序<div>。
进行ajax调用以加载html。
完成ajax调用后，隐藏/删除。gif/loader.html并显示您的index.html。

这可能会解决您的问题。

Answer 2

试试这个在document.load函数（）上显示加载器。在document.ready function（）中隐藏loader`

Answer 3

.load（url [，data] [，complete]）$.load

$(window).load(function(){
  $("body").load("loader.html", function(){
    /* place code need to executed after loader.html load */
  });
});

Answer 4

<强>的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>

希望你能帮忙

如何在页面加载完成之前显示页面加载html文件？

4 个答案: