zoukankan      html  css  js  c++  java
  • JS判断页面加载状态以及添加遮罩和缓冲动画

    废话少说,直接贴代码!有注释!
     
    function initialize() {
        addcloud(); //为页面添加遮罩
        document.onreadystatechange = subSomething; //监听加载状态改变
    }
     
    function addcloud() {
        var bodyWidth = document.documentElement.clientWidth;
        var bodyHeight = Math.max(document.documentElement.clientHeight, document.body.scrollHeight);
        var bgObj = document.createElement("div" );
        bgObj.setAttribute( 'id', 'bgDiv' );
        bgObj.style.position = "absolute";
        bgObj.style.top = "0";
        bgObj.style.background = "#000000";
        bgObj.style.filter = "progid:DXImageTransform.Microsoft.Alpha(style=3,opacity=25,finishOpacity=75" ;
        bgObj.style.opacity = "0.5";
        bgObj.style.left = "0";
        bgObj.style.width = bodyWidth + "px";
        bgObj.style.height = bodyHeight + "px";
        bgObj.style.zIndex = "10000"; //设置它的zindex属性,让这个div在z轴最大,用户点击页面任何东西都不会有反应|
        document.body.appendChild(bgObj); //添加遮罩
        var loadingObj = document.createElement("div");
        loadingObj.setAttribute( 'id', 'loadingDiv' );
        loadingObj.style.position = "absolute";
        loadingObj.style.top = bodyHeight / 2 - 32 + "px";
        loadingObj.style.left = bodyWidth / 2 + "px";
        loadingObj.style.background = "url(../img/loading.gif)" ;
        loadingObj.style.width = "32px";
        loadingObj.style.height = "32px";
        loadingObj.style.zIndex = "10000"
        document.body.appendChild(loadingObj); //添加loading动画-
    }
     
    function removecloud() {
        $( "#loadingDiv").remove();
        $( "#bgDiv").remove();
    }
     
    function subSomething() {
        if (document.readyState == "complete" ) //当页面加载完毕移除页面遮罩,移除loading动画-
        {
            removecloud();
        }
    }
     
     
     
  • 相关阅读:
    thinkphp3.2生成二维码
    php实现图片下载
    yii2.0 Activeform表单部分组件使用方法
    Yii2美化confirm
    Yii2学习笔记之场景
    tp5页面输出时,搜索后跳转下一页的处理
    php页面输出时,js设置input框的选中值
    mac中使用rz,sz上传文件
    golang的命令行程序开发
    Sring MVC基于Java Config方式配置Mybatis, 无XML
  • 原文地址:https://www.cnblogs.com/allon6318/p/2719367.html
Copyright © 2011-2022 走看看