判断页面加载完成&隐藏元素

判断页面加载是否完成

一、原生JS

1.页面所有内容加载完成:window.onload

window.onload = function(){
    init();　　 //你要做的操作。
}

• 当一个文档完全下载到浏览器中时，才会触发window.onload事件。
• 这意味着页面上的全部元素对js而言都是可以操作的，也就是说页面上的所有元素加载完毕才会执行。
• 这种情况对编写功能性代码非常有利，因为无需考虑加载的次序。

2. document.onreadystatechange

document.onreadystatechange = function() { //当页面加载状态改变的时候执行function
　　　　　　 if(document.readyState == "complete")
　　　　　　{ 　　//当页面加载状态为完全结束时进入 
              　　　　init();　　 //你要做的操作。
   　　　　　 }
　　　　}

二、jquery方法

$(document).ready()：

$(document).ready(function(){
　　　　　　init();　　 //你要做的操作。
　　　　})

• 会在DOM完全就绪并可以使用时调用。
• 虽然这也意味着所有元素对脚本而言都是可以访问的，但是，并不意味着所有关联的文件都已经下载完毕。
• 换句话说，当HMTL下载完成并解析为DOM树之后，代码就会执行（不包括图片视频资源）

JS控制页面控件显示和隐藏

1.visibility

document.getElementById("EleId").style.visibility="hidden"  //设置EleId标签隐藏
document.getElementById("EleId").style.visibility="visible"  //设置EleId标签显示

• visibility设置元素是否可见
• 使用这种方法实现隐藏后，页面的位置还是会被控件占用，显示空白

2.display

document.getElementById("EleId").style.display="none"   //设置EleId标签隐藏
document.getElementById("EleId").style.display="inline"   //设置EleId标签显示

• diaplay属性设置元素如何显示
• 此方法实现隐藏后，页面的位置不被占用