php中的site-onload-gif

problem is, that the website is loading like for about 20 second or longer (user-problems preprogrammed) my solution was to load a pre-site where the user sees a loading screen. i did this with this html-site but i want to do the same in php. the test-page is http://kater.selfhost.me/test/

Source Code:

<html xmlns="http://www.w3.org/1999/xhtml" > 
<head runat="server"> 
<title></title> 
<script type="text/javascript">
        window.onload = function() {
            document.getElementById("siteLoader").style.display = "none";
            document.getElementById("container").style.display = "block";
        }
</script>
</head>
<body>
<div id="container" style="display:none">
<div id="body">
<iframe src="http://kater.selfhost.me/stats/skins.php" frameborder="0" height="2000px" width="1024px"></iframe>
</div>
</div>
<div id='siteLoader'> 
<div id='siteDetailLoader'> 
<img src='ajax_loader.gif' border='0'> 
Please wait while the page loads...<br /> <br /> 
</div> 
</div>
</body>
</html>

i tried some workarounds, but after searching & testing for about three hours i give up... thanks in advance for any help provided! :-D

Adding what I alredy said at your question commentary, I made a code loading this content via AJAX:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">

    $( document ).ready(function() {
        //Load content
        loadAjaxContent();
    });

    function loadAjaxContent()
    {

         //VERY IMPORTANT: the URL domain MUST HAVE be the same as your request
         //that's why I'm not writting the full http://kater.selfhost.me/stats/skins.php
        $.ajax({
          url: "/stats/skins.php"
        }).done(function(data) {
            //remove loader
          $("#siteLoader").hide();

            //put PHP content
            $("#ajaxContent").html(data);
        });
    }
</script>
</head>
<body>

<div id="body">

    <div id="ajaxContent" style="width:1024px;"></div>

    <div id='siteLoader'> 
    <div id='siteDetailLoader'> 
        <img src='ajax_loader.gif' border='0' /> 
            Please wait while the page loads...<br /> <br />
     </div>
</div>

This is the most used way to load asynchronous content in the web. But pay attention at this: The http://kater.selfhost.me/stats/skins.php page is made to open as single page in the web, so it has <html> , <head>, <body> , etc.. tags, so..after loading this page into another you'll have two <html>, <body> .. tags in a same page, this is bad, but modern browsers have an awesome common sense and don't bother by this, but you should know that, and be aware.

The actual problem why it isn't loading yet, is this javascript in your content:

<script type="text/javascript"><!--
EXref="";top.document.referrer?EXref=top.document.referrer:EXref=document.referrer;//-->
</script>

I removed that and now works fine. Remember that's a quick fix, I don't know what this JS does.

Why it works in <iframe> and doesn't via AJAX? When you open in <iframe> is like opening in a new browser window..and via AJAX, as I have said, it'll load the page content straight inside your "parent" page.

So, removing this Javascript will work, but awesome further solutions:

  1. If you need to open this page both as content to load (via AJAX), both as single page, you can make two pages.. one for each need.

  2. If you just want to use as content to load, remove <html>, <head>, etc.. tags, and fix Javascript to work inside another page.