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

Question

I need a different page loader file (like: loader.html ) in which i have only loader.gif image with some css styling not in the same index.html file. So now i want to load my index.html file before it loads i want to show my loader.html file and if my all content loaded hide the loader.html file and show index.html file content. Hope you understand what i am saying please help :)

I tried this Code:

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

Answer 1

You can do this:

1. On Page Load show your .gif or loader .html in some <div> as you required.
2. Make ajax call to load html.
3. After complete ajax call hide/remove . gif/loader.html and show your index.html .

This might solve your problem.

Answer 2

1. try this instead On document.load function() show the loader . On document.ready function() hide the 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>

Hope you can help