两种方法实现在HTML页面加载完毕后运行某个js_javascript技巧

js方法:

复制代码 代码如下:

<script type="text/javascript">

window.onload=function(){

var userName="xiaoming";

alert(userName);
}

</script>

以下为jQuery方法,需要引用jQuery文件。

复制代码 代码如下:

<script type="text/javascript">

$(document).ready(function(){

var userName="xiaoming";

alert(userName);
});

</script>

或者其简写

复制代码 代码如下:

$(function(){
var userName="xiaoming";
alert(userName);
});

当dom加载完就可以执行(比window.onload更早)。在同一个页面里可以多次出现.ready()

PS:两者的主要区别

window.onload:

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

$(document).ready{ }:

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

举一个例子:

假设有一个表现图库的页面,这种页面中可能会包含许多大型图像,我们可以通过jQuery隐藏、显示或以其他方式操作这些图像。如果我们通过onload页面设置界面,那么用户在能够使用这个页面之前,必须要等到每一幅图像都下载完成。更糟糕的是,如果行为稍微添加给哪些具有默认行为的元素(比如链接),那么用户的交互可能会导致意想不到的结果。然而当我们试用$(document).ready(){ }进行设置时,这个界面就会更早地准备好可用的正确行为。

使用$(document).ready(){ }一般来说都要优于试用onload事件处理程序,但必须要明确一点的是,因为支持文件可能还没有家在完成,所以类似图像的高度和宽度这样的属性此时不一定有效。

注:用把js放在页面底部的方法以及运用defer="defer" 的方法都是会出现问题的。最好使用上面的函数!

时间: 2024-10-28 20:36:01

两种方法实现在HTML页面加载完毕后运行某个js_javascript技巧的相关文章

页面加载完毕后滚动条自动滚动一定位置

 希望页面加载完毕后向左自动滚动一定位置,下面有个不错的方法可以轻松帮大家实现下 昨天有一需求,是希望页面加载完毕后向左自动滚动一定位置.    一直以为只要给页面的 document.documentElement.scrollLeft 设置一个数值就生效,结果失望了~  今天抽空一查,才发现:  使用document.documentElement.scrollLeft 设置值,必须在人为事件触发下才生效:  想要页面加载完毕时自动滚动一定距离,则使用jquery的animate,如下面例子

在webbrowser中右键a标签都带有spm值,但在页面加载完毕后,在自定义按钮事件中用如下代码读取时,都没有spm值,求大神帮助。

问题描述 在webbrowser中右键a标签都带有spm值,但在页面加载完毕后,源文件的a标签都没有spm值,右击a标签之后spm值就会出现.估计是"//g.alicdn.com/alilog/mlog/??spm.js,spmact.js?v=141204"里的y()函数在加载的时候没有被触发.敢问大神怎么解决这个问题呢,只要实现我在模拟点击的a标签里有spm的值. 解决方案 本帖最后由 hunter1861 于 2015-10-05 15:17:24 编辑解决方案二:顶一下,大神们

页面加载完毕后滚动条自动滚动一定位置_javascript技巧

昨天有一需求,是希望页面加载完毕后向左自动滚动一定位置. 一直以为只要给页面的 document.documentElement.scrollLeft 设置一个数值就生效,结果失望了~ 今天抽空一查,才发现: 使用document.documentElement.scrollLeft 设置值,必须在人为事件触发下才生效: 想要页面加载完毕时自动滚动一定距离,则使用jquery的animate,如下面例子: $("html,body").animate({"scrollLeft

关于页面加载完毕后,修改结构的问题

问题描述 我想等页面加载完毕后让row里面有6个item应该怎么写?换句话来说就是:本来一行显示4个,共三行,现在一行显示6个,共两行,最后一行空白 问题补充:蔡华江 写道 解决方案 $(".item").each(function(i,n){ $(this).appendTo($(".row").eq(i/6));});未测试,你看下解决方案二:一个简单的办法,将所有的div设置float:left;那么他们就会从左往右一直铺过去了.解决方案三:试试:var di

jquery实现在页面加载完毕后获取图片高度或宽度_jquery

日前,本技术屌丝又遇到了一个很有意思的问题,应项目要求,需要在页面加载完毕之后获取图片的高度,以此来调整图片上面的覆盖层相对于图片顶端的位置. 但在jquery(function(){ /*XXXXXX*/});里面写了之后发现不是很理想,因为当jquery准备就绪的时候,此时图片绝大部分情况下都没加载完毕,这可急坏了本屌丝~~~T~T 本屌丝就想啊,要是jquery有个跟js的onload()的方法多好啊,擦~真是天上掉下个大狗屎,恰巧砸到本屌丝~~在网上搜了下,还真有这么个方法,写法如下:

页面加载完后自动执行一个方法的js代码_javascript技巧

1.在body中用onload: <body onload="myfunction()"> 2.在脚本中用window.onload: <script type="text/javascript"> function myfun() { alert("this window.onload"); } /*用window.onload调用myfun()*/ window.onload=myfun;//不要括号 </scr

页面加载完成后再执行JS的jquery写法以及区别说明

 本篇文章主要是对页面加载完成后再执行JS的jquery写法以及区别进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助 1.$(function(){  $("#a").click(function(){  //adding your code here  });  });  2.$(document).ready(function(){  $("#a").click(function(){  //adding your code here   });  })

在css加载完毕后自动判断页面是否加入css或js文件_jquery

最近在写项目的framework,写个JQueryMessageBox的类,以使用jquery ui中的dialog()来显示消息框,为了使方法方便调用,便加入了自动判断页面是否加入了ui.js和ui.css,代码如下: //如果没有包含ui.js,则引用 if ($('script[src$=""jquery-ui-1.8.11.custom.min.js""]').length == 0) {{ $(""<script src='/js

java selenium智能等待页面加载完成示例代码_实用技巧

java selenium  智能等待页面加载完成 我们经常会碰到用selenium操作页面上某个元素的时候, 需要等待页面加载完成后, 才能操作.  否则页面上的元素不存在,会抛出异常.  或者碰到AJAX异步加载,我们需要等待元素加载完成后, 才能操作 selenium 中提供了非常简单,智能的方法,来判断元素是否存在.  阅读目录 实例要求 隐式等待 显式等待 实例要求 实例:set_timeout.html 下面的html 代码,  点击click 按钮5秒后, 页面上会出现一个红色的d