精华内容
下载资源
问答
  • 在很多情况下,js代码需要设置为在页面加载之后才去执行,如果在页面没有加载完毕就执行js代码,很容易出现报错情况,因为页面中的某些dom根本没有加载完毕。本文章向大家介绍如何让js脚本在页面加载完后再执行的几...
  • 在页面加载完后执行javascript代码

    千次阅读 2015-03-19 16:50:43
    转载地址:there 最近在写javascript100插件时,遇到网友提的一个问题,代码必须放在body结束标签之后才能正常执行,放在head标签...为了让插件更加人性化,我还是想改进下这个缺陷,就必须让代码在页面加载完后执行JS

    转载地址:there

    最近在写javascript100插件时,遇到网友提的一个问题,代码必须放在body结束标签之后才能正常执行,放在head标签里面就会报错了。
    想了下原因,因为我写的这个javascript100插件中操作了页面的DOM元素,假如放在head之间,因为页面DOM还没开始渲染,所以会报错

    为了让插件更加人性化,我还是想改进下这个缺陷,就必须让代码在页面加载完后执行JS代码

    在网上搜索了下,让JS代码在页面加载完后执行有很多方法,我就一一列出来下
    方法1:

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

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

    方法2: 把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代码
        })

    我还看了下jQuery的源码
    jQuery里面还利用现代浏览器的DOMContentLoaded事件,这个事件是等DOM加载完后,就执行代码了,而不用等整个页面加载完后执行,但IE不支持这个事件,有兴趣的朋友可以自己研究研究

    展开全文
  • 想要在页面所有东西加载完成后执行一段js来改变受插件影响的数据, 但是发现不管用$(function(){});还是用onload都不行, 还是会被插件影响到,最后无意间把两个加上,就可以了 $(function(){  myfunction(); ...

    因为页面使用了某插件,但是每次页面加载后数据受到插件的影响,

    想要在页面所有东西加载完成后执行一段js来改变受插件影响的数据,

    但是发现不管用$(function(){});还是用onload都不行,

    还是会被插件影响到,最后无意间把两个加上,就可以了

    $(function(){

     myfunction();
    });
    function myfunction(){
    $("#province .selected").text("执行的js");

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

    }; 


    展开全文
  • 在js和jquery使用中,经常使用到页面加载完成后执行某一方法。通过整理,大概是五种方式(其中有的只是书写方式不一样)。1:使用jQuery的$(function){};2:使用jquery的$(document).ready(function(){});前两者本质上...

    在js和jquery使用中,经常使用到页面加载完成后执行某一方法。通过整理,大概是五种方式(其中有的只是书写方式不一样)。

    1:使用jQuery的$(function){};

    2:使用jquery的$(document).ready(function(){});前两者本质上没有区别,第1种是第2种的简写方式。两个是document加载完成后就执行方法。

    3:使用jQuery的$(window).load(function(){});

    4:使用window.onload = function(){} 第3种和第4种都是等到整个window加载完成执行方法体。两者也没有区别,只是一个使用dom对象,一个使用jQuery对象。

    5:在标签上静态绑定onload事件,

    等待body加载完成,就会执行aaa()方法。

    那么,这五种方式,执行的先后顺序是怎么样的呢?

    通过下方代码验证发现:

    使用1:jQuery的$(function){}和2:jquery的$(document).ready(function(){});无论位置放置在哪里,总是优先其余三种方式(原因是:这两种方式是在document加载完成后就执行,后三种是等到整个window页面加载完成后才执行),这两者之间的执行顺序是谁在上方谁优先执行。

    使用3:jQuery的$(window).load(function(){});

    4:window.onload = function bbb(){}这两种方式,总是优先于

    执行。他们两者执行顺序也是根据谁在上方谁先执行。

    使用5:

    总是最后执行。

    1

    2

    3   window.onload = function(){

    4     alert("页面加载完成====》onload");

    5   }

    6

    7   $(window).load(function(){

    8     alert("jquery===》window load" );

    9   })

    10

    11   $(document).ready(function () {

    12     alert("jquery====》document ready");

    13   });

    14

    15   $(function(){

    16     alert("jquery====》document onload");

    17   });

    18

    19   function aaa(){

    20     alert("静态标签====》onload");

    21   }

    22

    23

    如转载文章,请注明出处,谢谢!

    be893adb9107ed93644362a17eb808c7.png

    js中页面加载完成后执行的几种方式及执行顺序

    1:使用jQuery的$(function){}; 2:使用jquery的$(document).ready(function(){});前两者本质上没有区别,第1种是第2种的简写方式.两个是docu ...

    Javascript中页面加载完成后优先执行顺序

    Javascript中页面加载完成后优先执行顺序 document优先于windowwindow优先于element //document加载完成执行方法体 document.addEventList ...

    关于 第三方接口支付的时候 采用post提交的方式,有两种 一种是通过 curl来进行,一种是通过js当页面加载完后跳转

    这是第一种.通过javascript页面加载完后,对表单采用 post方式提交给 第三方接口----- echo <<<_end html public ...>

    js实现 页面加载 完成 后顺序 执行

    function addLoadEvent(func){ var oldonLoad = window.onload; if(typeof window.onload != 'function'){ ...

    js页面加载完后执行(document&period;onreadystatechange 和 document&period;readyState)

    js页面加载完后执行javascript(document.onreadystatechange 和 document.readyState) document.onreadystatechange ...

    页面加载完毕后调用js方法进行布局操控 已实验

    页面加载完毕后调用js方法进行布局操控 已实验 $(function(){ var check1 = $("[id$=SMS]").is(':checked'); var bl=$ ...

    转&colon;JS线程和JS阻塞页面加载的问题

    前几日写了一篇文章,介绍了js阻塞页面加载的问题.当时是通过例子来验证的.今天,我介绍一下浏览器内核,从原理上介绍一下js阻塞页面加载的原因. 浏览器的内核是多线程的,它们在内核制控下相互配合以保持同 ...

    js判断页面加载完毕方法

    判断页面加载完成这个方法是很常见的,下面有三个常用的方法,各有利弊. 一.纯js方法 // (1).页面所有内容加载完成执行 window.onload = function(){ } // (2). ...

    页面加载完成后,触发事件——trigger()

    点击我

    随机推荐

    png图片尺寸大小调整

    Android 开发中经常遇到各种hdpi,xhdpi,xxhdpi....很多尺寸大小的png图片要求. 网上也有不少工具,今天我又发现一款在线转换大小的网站,用了一下,一个png 114X114 ...

    购物车非cookie版

    2015.11.26购物车,非cookie版 [点击来,你发现被骗了(笑哭,笑哭,笑哭,源代码的话,留下邮箱吧,是在不好找这一时半会儿的.)] Jsp通过反射机制获取bean中的标签,但其实,可以没有 ...

    Linux - 引用

    双引号 如果把文本放在双引号中,那么 shell 使用的所有特殊字符都将失去它们的特殊含义,而被看成普通字符.字符 "$"(美元符号)."\"(反斜杠).&qu ...

    手把手教你mysql&lpar;十&rpar;索引

    手把手教你mysql(十)索引 一:索引的引入 索引定义:索引是由数据库表中一列或者多列组合而成,其作用是提高对表中数据的查询速度. 类似于图书的目录,方便快速定位,寻找指定的内容,如一本1000页的 ...

    Linux高性能server规划——多进程编程

    多进程编程 多进程编程包含例如以下内容: 复制进程影映像的fork系统调用和替换进程映像的exec系列系统调用. 僵尸进程以及怎样避免僵尸进程 进程间通信(Inter-Process Communic ...

    Java泛型类型擦除导致的类型转换问题

    初步结论:泛型类型转换不靠谱: 源码: package com.srie.testjava; public class TestClassDefine4 { public stati ...

    TCP长连接与短连接的原理及区别

    一.当网络通信时采用TCP协议时:  1.过程: 第一步:(在真正的读写操作之前)Server 和Client 之间必须建立一个连接,连接的建立需要三次握手 经典的三次握手示意图: 第二步:进行读写操 ...

    NandFlash ECC 校验

    ECC的全称是Error Checking and Correction,是一种用于Nand的差错检测和修正算法.如果操作时序和电路稳定性不存在问题的话,NAND Flash出错的时候一般不会造成整个 ...

    Python 数据分析Windows环境搭建

    1. 下载相应的Python软件并安装 python-3.6.0-amd64 2.  配置相应的环境变量path ;C:\Users\Administrator\AppData\Local\Progr ...

    Springboot 2&period;0 - 集成redis

    序 最近在入门SpringBoot,然后在感慨 SpringBoot较于Spring真的方便多时,顺便记录下自己在集成redis时的一些想法. 1.从springboot官网查看redis的依赖包 & ...

    展开全文
  • 在js和jquery使用中,常用到页面加载完成后执行某一方法。经过整理,大概是五种方式。javascript1.jQuery的$( function(){} );html2.jQuery的$(document).ready( function(){} );前二者本质上没有区别,第1种是第2种...

    在js和jquery使用中,常用到页面加载完成后执行某一方法。经过整理,大概是五种方式。javascript

    1.jQuery的$( function(){} );html

    2.jQuery的$(document).ready( function(){} );前二者本质上没有区别,第1种是第2种的简写方式。两个是document加载完成后就执行方法。java

    3.jQuery的$(window).load( function(){} );jquery

    4.window.onload = function(){}第3种和第4种都是等整个window加载完成执行方法体。二者也没有区别,只是一个使用dom对象,一个使用jQuery对象。dom

    5.在标签上静态绑定onload事件,

    等待body加载完成,就会执行executeAfterloadedBody()。spa

    window.onload必须等到页面内包括图片的全部元素加载完毕后才能执行,$(document).ready()是DOM结构绘制完毕后就执行,没必要等到加载完毕

    window.onload不能同时编写多个,若是有多个window.onload方法,只会执行一个,$( function(){} )/$(document).ready()能够同时编写多个,而且均可以获得执行

    这五种方式,执行的前后顺序是:htm

    1.$( function(){} );和 2.$(document).ready( function(){} );不管位置放置在哪里,老是优先其他三种方式(缘由是:这两种方式是在document加载完成后就执行,后三种是等到整个window页面加载完成后才执行),这二者之间的执行顺序是谁在上方谁优先执行。对象

    3.$(window).load(function(){});和4.window.onload = function(){}这两种方式,老是优先于

    执行。他们二者执行顺序也是根据谁在上方谁先执行。blog

    5.

    老是最后执行。事件

    window.onload = function(){

    alert("window_html loaded====》onload");

    }

    $(window).load(function(){

    alert("jquery===》window_html loaded" );

    })

    $(document).ready(function () {

    alert("jquery====》document loaded");

    });

    $(function(){

    alert("jquery====》document onload");

    });

    function executeAfterloadedBody(){

    alert("====》onload");

    }

    展开全文
  • JS页面加载完毕后执行的多种方式和比较

    万次阅读 多人点赞 2019-07-31 18:40:41
    做项目的时候可能会遇到这种情况: 一个页面的中定义了多个onload事件,那么此定义window.onload函数的时候可能会不生效或者多个onload之间覆盖的现象. 有的朋友肯定会说用jQuery的$(document).ready(function(){}...
  • 主要介绍了JavaScript实现当网页加载完成后执行指定函数的方法,实例分析了javascript加载页面执行函数的技巧,需要的朋友可以参考下
  • 首先我们会想着mounted或者created里面加入想要执行的方法,但是有的时候会遇到执行这个方法的时候,页面还并没有被渲染完成,所以就会出现这个方法匹配页面标签报错的情况。 解决思路: 1.通过子页面调用...
  • 页面加载完成后执行JS的5种方式

    万次阅读 2018-11-09 11:06:01
    在js和jquery使用中,经常使用到页面加载完成后执行某一方法。通过整理,大概是五种方式。 1.jQuery的$( function(){} ); 2.jQuery的$(document).ready( function(){} );前两者本质上没有区别,第1种是第2种的简写...
  • 最近在写javascript100插件时,遇到网友提的一个问题,代码必须放在body结束标签之后才能正常执行,...为了让插件更加人性化,我还是想改进下这个缺陷,就必须让代码在页面加载完后执行JS代码 在网上搜索了下,让J...
  • 主要介绍了Vue.js 关于页面加载完成后执行一个方法的问题,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • 页面加载完后执行js代码的三种写法

    千次阅读 2019-01-31 15:15:19
    //完整: $(document).ready(function(){ ...................... }); //简写: $(function(){ ............. }) //JS: window.load=function(){ .......
  • 在js和jquery使用中,经常使用到页面加载完成后执行某一方法。通过整理,大概是五种方式(其中有的只是书写方式不一样)。 1:使用jQuery的$(function){}; 2:使用jquery的$(document).ready(function(){}); 前...
  • 实现jsp页面完全加载完成后执行一个js函数的方法有很多,本文就简单为大家介绍下常用的几种,感兴趣的朋友不要错过
  • 在js和jquery使用中,经常使用到页面加载完成后执行某一方法。通过整理,大概是五种方式(其中有的只是书写方式不一样)。 1:使用jQuery的$(function){}; 2:使用jquery的$(document).ready(function(){});前两者...
  • 页面加载完成后执行JS代码

    千次阅读 2013-01-27 11:13:47
    我们有时候会想实现有个页面onload的效果,用下面的代码,我们不必要body里加上onload事件了。 var ready = function(fun) { if (document.addEventListener) { document.addEventListener(...
  • 怎样使页面加载完执行js代码 由于HTML页面的加载顺序是从上到下...一、在原生js中,在页面所有元素加载完执行js代码 如下: 1.使用load事件 <script> window.addEventListener('load', function() { //js代码
  • 做项目的时候可能会遇到这种情况:一个JSP页面中import了一个目录文件(menu.jsp),而且每个页面的中都定义了onload事件,那么此定义window.onload函数的时候可能会不生效或者多个onload之间覆盖的现象.有的朋友肯定会...
  • 在js和jquery使用中,经常使用到页面加载完成后执行某一方法。通过整理,大概是五种方式(其中有的只是书写方式不一样)。 1:使用jQuery的$(function){}; 2:使用jquery的$(document).ready(function(){});前两者...
  • 本篇文章主要是对页面加载完成后执行JS的jquery写法以及区别进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助
  • html 中javascript 页面加载完成后执行函数 页面初始化调用 window.onload = function(){ dosth1(); dosth2(); } 或者引入jquery $(document).ready(function(){ dosth1(); dosth2(); });
  • 主要介绍了加载完成一个页面后自动执行一个方法,很简单很实用,需要的朋友可以参考下
  • 直接在Javascript代码放在标记对和之间2.由标记的src属性制定外部的js文件3.放在事件处理程序中,比如:点击我4.作为URL的主体,这个URL使用特殊的Javascript:协议,比如:点击我5.利用javascript本身的document....

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 273,300
精华内容 109,320
关键字:

如何在页面加载完成后执行js