javascript / CSSのみを使用して待機画像でページが読み込まれるまでUIをブロックする方法

debugcn 投稿 Dev

サム

javascriptまたはCSSによる待機画像が完全に読み込まれるまでhtmlページをブロックしたいが、JQUERYは使用しない

これらのデモのように達成したいhttp://malsup.com/jquery/block/#demos

jqueryソリューションで提案しないでください。

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>

t.niese

ここで表示されますソリューション待機画像をするときのjsがアクティブであり、キープ待機画像ならば隠されたjsがアクティブではありません。

待機イメージを表示する#loadingとを非表示にするデフォルトのルールを作成します.is-loading #loading
JSを使用してクラスwait imageをhtml要素に追加します
コンテンツ（または画像）が読み込まれたら、is-loadingクラスを削除します。

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

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]