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

How to show Page Loading html file until the page has finished loading?

本文关键字：加载 文件 显示 html      更新时间：2023-09-26

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

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

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

你可以这样做：

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

这可能会解决您的问题。

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

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>

希望你能帮到你

相关文章：