loading image before page loads

Discussion in 'PHP' started by ahdsan, Feb 8, 2011.

0
  1. #1
    I have a page with many calculations and takes time to load.
    when i click the link for the page , it takes time to load the page and only then the loader comes in. i have put a loader at the top of the page. I want that as soon as user clicks the menu the loader should appear


    <?php
    session_start();
    ?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr">
    <!-- DW6 -->

    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>SALES SUMMARY</title>
    <style type="text/css">
    <!--

    .style74 {
    font-size: large;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-weight: bold;
    color: #000000;
    vertical-align:middle;
    }

    .transparency {
    filter: alpha(opacity=60);
    -moz-opacity: 0.6;
    opacity: 0.6;
    background-color:#EEE;
    position:absolute;
    top:450px;
    left:110px;
    position: fixed;
    _position: absolute;
    z-index: 99;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    _height: expression(document.body.offsetHeight + "px");

    }

    -->
    </style>

    <link href="styles/style2.css" rel="stylesheet" type="text/css" />
    <style type="text/css">

    .style56 {
    border-width: 0px;
    }

    </style>
    </head>

    <body onLoad="init()">
    <div id="loading" class="transparency" style="left: 0; top: 0">
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p align="center">&nbsp;<span class="style74">Loading...</span></p>
    </div>
    <script>

    var ld=(document.all);
    var ns4=document.layers;
    var ns6=document.getElementById&&!document.all;
    var ie4=document.all;
    if (ns4)
    ld=document.loading;
    else if (ns6)
    ld=document.getElementById("loading").style;
    else if (ie4)
    ld=document.all.loading.style;
    function init()
    {
    if(ns4){ld.visibility="hidden";}
    else if (ns6||ie4) ld.display="none";
    }
    </script>
     
    ahdsan, Feb 8, 2011 IP
  2. moads

    moads Member

    Messages:
    115
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    28
    #2
    You can preload an image like this...

    <SCRIPT language="JavaScript">
    <!--
    if (document.images)
    {
    pic1= new Image(100,25);
    pic1.src="http://yoursite.com/image1.gif";
    }
    //-->
    </SCRIPT>
     
    moads, Feb 8, 2011 IP
  3. ahdsan

    ahdsan Member

    Messages:
    74
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    41
    #3
    what is preload ?
     
    ahdsan, Feb 8, 2011 IP
  4. srisen2

    srisen2 Peon

    Messages:
    359
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #4
    try load delaying the elements that require extra calculations

    <script type="text/javascript">

    function timeout_init() {
    setTimeout('example_ajax_request()', 2000);
    }

    example_ajax_request{
    document.getElementById('DivExample').innerHTML="Good Afternoon";
    }
    </script>

    <body onload="timeout_init()">
     
    srisen2, Feb 8, 2011 IP