Question

18

How Block UI until page load with wait image using javascript/CSS only

rated 0 times [ 24] [ 6] / answers: 1 / hits: 5194 / 10 Years ago, sat, june 21, 2014, 12:00:00

I want to block html page until it loads completely with wait image by javascript or CSS but WITHOUT JQUERY

I want to achieve like these demos http://malsup.com/jquery/block/#demos

Please don't suggest with jquery solutions.

HTML code:



    <!DOCTYPE html>

    <html xmlns=http://www.w3.org/1999/xhtml>

    <head>

        <title></title>

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

    </head>

    <body onload=init()>

//image which has size of 40 mb.

            <img src=show.jpg />

        <div id=loading style=position:absolute; width:100%; text-align:center; top:300px;>           



            //loading image to see while loading background image

        <img src=loading.gif />

        </div>

    </body>

    </html>

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

seth

Add To Favorites

Follow

Total Points: 307

Total Questions: 114

Total Answers: 96

Location: Kenya

Member since Mon, Jun 14, 2021

3 Years ago

answered 10 Years ago mckaylab · Accepted Answer

Here a solution that will show the wait image when js is active, and keep the wait image hidden if js is not active:

Create a default rule that hides the #loading and a .is-loading #loading that shows the wait image

Use JS to add the class wait image to the html element

When the content (or image) is loaded remove the is-loading class.

 <!DOCTYPE html>

 <html>

 <head>

     <title></title>

     <script type=text/javascript>

     (function() {

       var html = document.getElementsByTagName('html')[0];

       html.className += ' is-loading'; 



       window.onload = function() {

         html.className = String(html.className).replace('is-loading','');

       }

     }());

     </script>



     <style>

     #loading {

       display : none;

       position : absolute;

       width : 100%;

       text-align : center;

       top : 300px;

     }



     .is-loading #loading {

       display: block;

     }

     </style>





 </head>

 <body>

     <!--image which has size of 40 mb. -->

     <img src=show.jpg >



     <div id=loading>

         <!-- loading image to see while loading background image -->

         <img src=loading.gif >

     </div>

 </body>

 </html>