• 欢迎加入本站交流QQ群:223991312
  •    2年前 (2015-04-01)  前端开发 |   抢沙发  170 
    文章评分 1 次,平均分 5.0

    在页面加载后执行JS代码的方式

    方法1:defer

    <script defer="defer" language="javascript"></script>
        //或者
    <script defer language="javascript"></script>

    但这种方法只有IE支持,其他浏览器不识别defer 这种方法不靠谱

    方法2:js代码置于文档最后

    把js代码放在</body>结束标签之后, 因为浏览器代码渲染是从上至下的,这种方法是最傻瓜的,兼容所有浏览器

    方法3: 利用document.onreadystatechange事件

    if(document.readyState=="complete"){
       //js代码
     }

    不过这种方法,也有缺点有的浏览器在readStates等于loaded时就完了,不会跳到complete状态,而且早期的火狐等浏览器不支持这个事件,单纯的用这种方法不靠谱

    方法4:利用window.onload事件

    window.onload=function(){
        funA();
    }

    但这个方法在IE中只能在一个地方调用,假如2个地方调用,后面调用的就会把前面的添加的覆盖掉;

    window.onload=function(){
        funA();
    }
    window.onload=function(){
        funB();
    }

    如果2个地方调用,funA()在IE中就不会执行了,所以只能把它们写在一起。

    window.onload=function(){
        funA();
        funB();
    }

    在IE中调用还是很不方便。

    不过可以利用一个函数,我们就可以多处调用了。

    var $$ = function(func){
        var oldOnload =window.onload;
        if(typeof window.onload != 'function'){
            window.onload = func;
        }else{
            window.onload = function(){
                oldOnload();
                func();
            }
        }
    }
    //调用
    $$(function(){
        //页面加载完后执行js代码
    })

    window.onload是使用的DOM 0 级方法,我们还可以使用DOM 2级方法给onload事件添加需要执行的代码,不过也得写一个兼容函数。

    var $$ = function(func){
        if ( document.addEventListener ) {
            window.addEventListener( "load", func, false );
        }else  if ( document.attachEvent ){
            window.attachEvent( "onload", func);
        }
    }
    $$(function(){
        //页面加载完后执行js代码
    })

    需要注意的是,window.onload会在整个页面的document全部加载完成以后执行。不幸的这种方式不仅要求页面的DOM tree全部加载完成,而且要求所有的外部图片和资源全部加载完成。更不幸的是,如果外部资源,例如图片需要很长时间来加载,那么这个js效果就会让用户感觉失效了。

    方法5:jQuery方法

    jQuery仅仅只需要加载所有的DOM结构,在浏览器把所有的HTML放入DOM tree之前就执行js效果。包括在加载外部图片和资源之前。

    $(document).ready(function() {
    
        // add your code here 
        initPublish();
    
        $(.a).click(function() {
    
            // add your code here 
        });
    
    });

    或者(推荐使用)

    $(function() {
    
        initPublish();
    
    });
     

    除特别注明外,本站所有文章均为前端迷原创,转载请注明出处来自http://www.yxxme.com/938.html

    关于
    本站汇集前端开发教程与技巧、交互设计、插件、网页特效、PSD素材、模板源码、网页设计等素材,相关内容均保证绿色安全、优质实用,欢迎大家多多交流,期待共同学习进步。
    切换注册

    登录

    忘记密码 ?

    您也可以使用第三方帐号快捷登录

    切换登录

    注册

    扫一扫二维码分享