js中文档加载完毕写法

最新推荐文章于 2023-02-16 12:38:37 发布
最新推荐文章于 2023-02-16 12:38:37 发布
阅读量721 收藏
点赞数
分类专栏： javascript jQuery

js中文档加载完毕。一般在body加一个onload事件或者window.onload = function () {}

jQuery中有好多写法，平时也不注意，别人一问，还真觉得头大。

<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <script src="jquery-1.7.1.js" type="text/javascript"></script>

</head>

<body style=" overflow-y:scroll;overflow-x:auto;">
<input type="text"  id="dd1" value="" />

<textarea id="tt" cols="30" rows="30"></textarea>
</body>
</html>
        
<script>
var i=1;

//jQuery方式
$(document).ready(function(){
    var str=$("#tt").val()+'\r\n'+'$_A加载完毕'+i;
  $("#tt").val(str);
  i++;
    });

$(function(){
  var str=$("#tt").val()+'\r\n'+'$_B加载完毕'+i;
  $("#tt").val(str);
  i++;
 }) ;

$(function($) {
        var str=$("#tt").val()+'\r\n'+'$_C加载完毕'+i;
  $("#tt").val(str);
  i++;
});

$(window).load(function() {
        var str=$("#tt").val()+'\r\n'+'$_D加载完毕'+i;
  $("#tt").val(str);
  i++;
});

(function() {
        var str=$("#tt").val()+'\r\n'+'$_E加载完毕'+i;
  $("#tt").val(str);
  i++;
})(jQuery)

jQuery与别名$可互通/
jQuery(document).ready(function(){
    var str=$("#tt").val()+'\r\n'+'jQuery_F加载完毕'+i;
  $("#tt").val(str);
  i++;
    });

jQuery(function() {
        var str=$("#tt").val()+'\r\n'+'jQuery_G加载完毕'+i;
  $("#tt").val(str);
  i++;
})
jQuery(function($) {
        var str=$("#tt").val()+'\r\n'+'jQuery_H加载完毕'+i;
  $("#tt").val(str);
  i++;
});

jQuery(window).load(function() {
        var str=$("#tt").val()+'\r\n'+'jQuery_I加载完毕'+i;
  $("#tt").val(str);
  i++;
});

//js方式
window.onload = function () {
    var str=document.getElementById("tt").value+'\r\n'+'js加载完毕'+i;;
  document.getElementById("tt").value=str;
  i++;
 };

 


/*注意顺序,没有按照我们上面的顺序出来的，那就是本身加载有先后。
D和I加载的是window，所以慢。

$_E加载完毕1
$_A加载完毕2
$_B加载完毕3
$_C加载完毕4
jQuery_F加载完毕5
jQuery_G加载完毕6
jQuery_H加载完毕7
js加载完毕8
$_D加载完毕9
jQuery_I加载完毕10

*/
</script>

meimonkey
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
原生js检测页面加载完毕的实例
12-09
原生js的页面加载完毕的使用方法为 [removed]=function(){ //somecode } 在jquery的影响下的错误写法为： [removed](function(){ //somecode }) 以上这篇原生js检测页面加载完毕的实例就是小编分享给大家的全部...
JavaScript DOM文档事件
m0_67942533的博客
09-07 4532
JavaScript DOM文档事件
documen.load和documen.ready的区别
subsistent的博客
02-16 651
DOM load在加载图片等非文字媒体文件之后，表示在document文档加载完成后才可以对DOM进行操作，document文档包括了加载图片等非文字媒体文件。文档加载的顺序：域名解析-->加载HTML-->加载JavaScript和CSS-->加载图片等非文字媒体文件。文档加载的顺序：域名解析-->加载HTML-->加载JavaScript和CSS-->加载图片等非文字媒体文件。一般情况一个页面响应加载的顺序是，域名解析-加载html-加载js和css-加载图片等其他信息。
如何监听HTML页面加载？(Document加载的两种方式的区别)
weixin_44685906的博客
05-04 2925
Document加载的两种方式的区别Document加载的两种方式区别监听HTML页面(不包括图片、样式)加载完成，也就是我们常说的DOMContentLoaded事件监听页面所依赖的所有资源全部加载完成，也就是我们常说的window.onload事件 Document加载的两种方式区别 监听HTML页面(不包括图片、样式)加载完成，也就是我们常说的DOMContentLoaded事件 判断ready的方法: 监听document的onreadystatechange，判断readyState
JavaScript：文档加载事件和浏览器的重排、重绘
读心悦
10-25 992
很多时候需要在页面初始化阶段执行一些特定的操作，页面初始化的操作就是文档加载完成后的执行的操作。在DOM中，文档加载完成有两个事件，一个load事件，另一个是jQuery提供的ready事件。ready事件的触发表示文档结构已经加载完成，不包含图片、flash这些非文字媒体内容。onload事件的触发表示页面图片、flash这些所有元素已经加载完成。
判断document加载完成比较
weixin_30639719的博客
01-30 269
1.页面加载完成（HTML css js 图片 iframe） window.onload=function(){};$( window ).load(function() {}); 2.页面加载完成（html、 css 和js之间） $(document).ready(); $(function(){}) 3.页面加载完成（hmtl css之间） docume...
jquery实现在页面加载完毕后获取图片高度或宽度
12-12
里面写了之后发现不是很理想，因为当jquery准备就绪的时候，此时图片绝大部分情况下都没加载完毕，这可急坏了本屌丝~~~T~T 本屌丝就想啊，要是jquery有个跟js的onload()的方法多好啊，擦~真是天上掉下个大狗屎，恰巧...
Angular.js中[removed](),$(document).ready()的写法浅析
01-19
一,问题发现: 最近公司有个微信公众号项目,为了方便直接使用anular.js+ionic进行开发,里面有使用到echarts图表,具体开发中发现echarts在初始化绑定图表的DOM节点时,一直提示该节点不合法;...加载完毕); }); aler
JQuery的ready函数与JS的onload的区别详解
12-10
执行时间[removed]必须等到页面内包括图片的所有元素加载完毕后才能执行。$(document).ready()是DOM结构绘制完毕后就执行，不必等到加载完毕。 2.编写个数不同[removed]不能同时编写多个，如果有多个[removed]方法，...
jquery插件使用方法大全
05-24
要等到页面全部加载完毕才执行，注意是全部加载，包括dom,图片等其它资源。 而$(document).ready(function(){ alert("hello"); });(1) 当dom加载完就可以执行了。 代码1同时做到表现和逻辑分离。并且可以在...
document.readyState等属性
hsany330的专栏
08-27 892
document.readyState:判断文档是否加载完成。firefox不支持。 这个属性是只读的，传回值有以下的可能： 0-UNINITIALIZED：XML 对象被产生，但没有任何文件被加载。 1-LOADING：加载程序进行中，但文件尚未开始解析。 2-LOADED：部分的文件已经加载且进行解析，但对象模型尚未生效。 3-INTERACTIVE：仅对已加载的部分文件
js中页面加载完成后执行的几种方法及执行顺序
weixin_46460843的博客
03-17 6076
在js和jquery使用中，经常使用到页面加载完成后执行某一方法。通过整理，大概是五种方式（其中有的只是书写方式不一样）。 1：使用jQuery的$(function){}; 2：使用jquery的$(document).ready(function(){});前两者本质上没有区别，第1种是第2种的简写方式。两个是document加载完成后就执行方法。 3：使用jQuery的$(window).load(function(){}); 4:使用window.onload = function(){} 第3种和
浅谈文档加载完成事件——document.ready和onload的区别
筱葭的博客
03-20 1万+
文档加载完成的两种事件 ready，表示文档结构已经加载完成（不包含图片等非文字媒体文件）onload，指示页面包含图片等非文字媒体文件在内的所有元素都加载完成。   1、DOM ready 文档加载的顺序：域名解析-->加载HTML-->加载JavaScript和CSS-->加载图片等非文字媒体文件。 DOM ready在加载JavaScript和CSS与加载图片等非文字媒
前端 js 页面加载完成事件 - onload，五种写法
firstcode666的博客
11-27 4656
在js和jquery使用中，经常使用到页面加载完成后执行某一方法。通过整理，大概是五种方式（其中有的只是书写方式不一样）。 1：使用jQuery的$(function){}; 2：使用jquery的$(document).ready(function(){}); 前两者本质上没有区别，第1种是第2种的简写方式。两个是document加载完成后就执行方法。 3：使用jQuery的$(window).load(function(){}); 4：使用window.onload = functi..
js文档加载事件---
爱菜鸟高高飞
08-28 1872
1. 延迟调用read,,jQuery.holdReady $.holdReady(true); //延迟调用 $.getScript("myplugin.js", function() { $.holdReady(false); //释放,可再执行read }); 2.dom加载完成,后执行代码 $( handler ) $( document ).ready( ha...
document.ready和onload的区别——JavaScript文档加载完成事件
热门推荐
JEECG官方博客
04-17 1万+
页面加载完成有两种事件，一是ready，表示文档结构已经加载完成（不包含图片等非文字媒体文件），二是onload，指示页面包含图片等文件在内的所有元素都加载完成。(可以说：ready 在onload 前加载！！！) 我的理解： 一般样式控制的，比如图片大小控制放在onload 里面加载;              而：jS事件触发的方法，可以在ready 里面加载;用jQ的人很多人
document.ready和onload的区别——JavaScript文档加载完成的那点事儿
yancheng的专栏
04-07 2219
页面加载完成有两种事件: $(document).ready(function(){}) : 表示文档结构已经加载完成（不包含图片等非文字媒体文件） $(document).ready(function(){})等同于$(function(){}) window.onload: 表示页面包含图片等文件在内的所有元素都加载完成后执行。 可以理解为：ready
JavaScript js文档加载事件，以及jquery加载事件
91奔跑的蜗牛
10-29 729
&lt;script&gt; //js文档加载完成的事件 /* * 会被后面的window.onload覆盖，该处不会在页面上弹出 111 */ window.onload = function(){ alert("window.onload 111"); } window.onload = function(){ ale...
JS实现文档加载完成后执行代码
firstcode666的博客
11-27 751
本文给大家讲述的是使用javascript实现文档加载完成后再执行代码的方法和示例，非常简单实用，有需要的小伙伴可以参考下。 在执行某些操作的时候，需要当文档完全加载完成之后再去执行，否则可能出现意向不到的情况，先看一段代码实例: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 ..
vue3 路由懒加载 几种写法
最新发布
09-23
在Vue3中，有几种常见的写法可以实现路由懒加载: 1. 使用ES6的import函数进行懒加载。这是官方推荐的方式。例如: ``` const Foo = () => import('../components/Foo') const Aoo = () => import('../components/Aoo') ``` 2. 使用require.ensure()进行懒加载。这是webpack提供的方式，可以按需加载资源。例如: ``` const Foo = () => require.ensure([], () => require('../components/Foo'), 'chunkName') const Aoo = () => require.ensure([], () => require('../components/Aoo'), 'chunkName') ``` 以上是常见的两种写法，它们都可以实现路由懒加载，提高页面初始加载效率。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值