zoukankan      html  css  js  c++  java
  • 判断加载document、script、link可用时刻

    ie各个方面都有自己独特的方法,它为DOM中某些部分提供了readystatechange事件。支持readystatechange事件的对象都有readystate属性。readystate共有以下几个值:
    uninitialized: 对象存在但未初始化;
    loading:对象正在加载;
    loaded:对象数据加载完毕;
    interactive:可以操作对象了,但还没加载完毕;
    complete:加载完毕。
    注意上面5个值并不一定每个事件都全包含,并且不一定是什么顺序。下面讲到的加载会用到上面的内容。

    1.document加载 
    众所周知 window.onload是等待所有资源加载完毕(包括图像)。
    想要实现DOM树记载完毕就触发方法:DOM标准提供了一个DOMContentLoaded,DOM树加载完毕就会触发;ie的document对象的readystate属性值为interactive或complete的时候行为很像DOMContentLoaded。

    function ready(callback){
    if(document.addEventListener){//DOM标准
    document.addEventListener('DOMContentLoaded', callback, false);
    }else if(document.attachEvent){//ie
    document.attachEvent('onreadystatechange',function(){
    if(document.readystate == 'interactive' || document.readystate == 'complete'){//交互或完成阶段
    document.detachEvent('onreadystatechange',arguments.callee);//为了避免2次触发
    callback();
    }
    });
    }else{//都不支持就直接等所有都下载完了算了...
    window.onload = callback;
    }
    }

    2.动态加载javascript
    分为动态引入Js文件和直接添加js语句。
    动态引入Js文件不会阻碍浏览器的线程。除了ie其他大部分浏览器的script标签都支持load方法;ie依然通过script的readystate属性值判断何时方法下载完毕并可用。

    function loadScript(url, callback){
    var script = document.createElement('script');
    script.type = 'text/javascript';
    if(script.onload){//非ie支持load
    script.onload = callback;
    }else{//ie
    script.onreadystatechange = function(){
    if(script.readystate == 'loaded' || script.readystate =='complete'){
    script.onreadystatechange = null;//为了避免2次触发
    callback();
    }
    }
    }
    script.src = url;
    document.body.appendChild(script);
    }

    动态载入Js语句就不涉及到什么时候可以用了,因为没有http请求了(这样做其实意义不是很大了)。

    function loadScriptString(code){
    var script = document.createElement('script');
    script.type = 'text/javascript';
    try{
    script.appendChild(document.createTextNode(code));//DOM标准
    }catch(ex){
    script.text = code;//ie
    }
    document.body.appendChild(script);
    }

    3.动态载入样式link
    和动态载入script很相似。一般来说,知不知道样式已经加载完成并不重要。ie和opera也支持link的load事件来判断加载完毕,ie中link对象也有readystatechange方法。
    由于是否加载完成并不重要,下面载入外部文件的方法就不判断了。

    function loadStyle(url){
    var link = document.createElement('link');
    link.rel = 'stylesheet';
    link.type = "text/css";
    link.href = url;
    document.getElementsByTagName('head')[0].appendChild(link);
    }
    function loadStyleString(css){
    var style = document.createElement('style');
    style.type = "text/css";
    try{
    style.appendChild(document.createTextNode(css));//DOM标准
    }catch(ex){
    style.styleSheet.cssText = css;//ie
    }
    document.getElementsByTagName('head')[0].appendChild(style);
    }


     

  • 相关阅读:
    AIMS 2013中的性能报告工具不能运行的解决办法
    读懂AIMS 2013中的性能分析报告
    在线研讨会网络视频讲座 方案设计利器Autodesk Infrastructure Modeler 2013
    Using New Profiling API to Analyze Performance of AIMS 2013
    Map 3D 2013 新功能和新API WebCast视频下载
    为Autodesk Infrastructure Map Server(AIMS) Mobile Viewer创建自定义控件
    ADN新开了云计算Cloud和移动计算Mobile相关技术的博客
    JavaScript修改css样式style
    文本编辑神器awk
    jquery 开发总结1
  • 原文地址:https://www.cnblogs.com/bianyuan/p/2358530.html
Copyright © 2011-2022 走看看