如何仅使用javascript/CSS阻止UI直到页面加载等待图像_Javascript_Html_Css

如何仅使用javascript/CSS阻止UI直到页面加载等待图像

javascript html css

如何仅使用javascript/CSS阻止UI直到页面加载等待图像,javascript,html,css,Javascript,Html,Css,我想阻止html页面，直到它通过javascript或CSS完全加载wait image，但不使用JQUERY 我想实现这些演示请不要建议使用jquery解决方案 HTML code: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script>

我想阻止html页面，直到它通过javascript或CSS完全加载wait image，但不使用JQUERY

我想实现这些演示

请不要建议使用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>

HTML代码：
var ld=（document.all）；
var ns4=document.layers；
var ns6=document.getElementById&！所有文件；
var ie4=document.all；
如果（ns4）
ld=文件加载；
否则，如果（ns6）
ld=document.getElementById（“加载”）.style；
否则如果（ie4）
ld=document.all.load.style；
函数init（）{
如果（ns4）{ld.visibility=“hidden”；}
如果（ns6 | | ie4）ld.display=“无”；
}
//图像大小为40 mb。
//加载背景图像时加载要查看的图像

这里有一个解决方案，当js处于活动状态时显示等待映像，如果js未处于活动状态，则隐藏等待映像：

创建一个默认规则，隐藏显示等待图像的
```
#加载
```
和
```
正在加载#加载
```
使用JS将类
```
wait image
```
添加到
```
html
```
元素中
加载内容（或图像）时，删除正在加载的
```
类
```




（功能（）{
var html=document.getElementsByTagName（'html'）[0]；
html.className+='正在加载'；
window.onload=函数（）{
html.className=String（html.className）.replace（'is-loading'，''）；
}
}());
#装载{
显示：无；
位置：绝对位置；
宽度：100%；
文本对齐：居中；
顶部：300px；
}
.正在加载#加载{
显示：块；
}
您应该使用功能检测而不是浏览器检测。你真的想支持这样的旧浏览器吗？你确定
应该在#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>