$(document).ready和window.onload、<body onload=”load()”> 小结

最新推荐文章于 2019-09-09 14:45:33 发布
最新推荐文章于 2019-09-09 14:45:33 发布
阅读量338 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/u012148262/article/details/79098356
版权

在Jquery里面，我们可以看到两种写法:$(function(){}) 和$(document).ready(function(){})

这两个方法的效果都是一样的，都是在dom文档树加载完之后执行一个函数（注意，文档树加载完不代表全部文件加载完）。

而window.onload（<body οnlοad=”load()”>）是在dom文档树加载完和所有文件加载完之后执行一个函数。也就是说$(document).ready要比window.onload先执行。

Johnsno
关注
window.onload和DOMContentLoaded的区别
skysys的研究小屋
08-13 2990
一、何时触发这两个事件？ 1、当 onload 事件触发时，页面上所有的DOM，样式表，脚本，图片，flash都已经加载完成了。 2、当 DOMContentLoaded 事件触发时，仅当DOM加载完成，不包括样式表，图片，flash。 二、为什么要区分？ 开发中我们经常需要给一些元素的事件绑定处理函数。但问题是，如果那个元素还没有加载到页面上，但是绑定事件已经执行完了，是没有效果的。这两个事件大致就是用来避免这样一种情况，将绑定的函数放在这两个事件的回调中，保证能在页面的某些元素加载完毕之后再绑定事件的函
前端页面载入完毕事件load（），调用jQuery修改控件属性
shanchunyefu的博客
10-21 896
一：前端页面载入完毕，调用jQuery修改空间属性 <body onload="load()"> //载入完毕后调用load（） <script> function load(){ if ('{$userinfo['openid']}'==''){ mui.alert('老铁，微信里打开吧！') //-----------jQu...
document.ready()和传统的方法<body onload=”load()”>
love398146779的专栏
04-18 270
document.ready()和传统的方法 相似，不同的是onload()的方法是在页面加载完成后才发生，这包括DOM元素和其他页面元素（例如图片）的加载，因此，使用document.ready()方法的执行速度比onload()的方法要快。 document.ready()可以说是jQuery的一大特色，它不仅比传统的Javascript函数onload()要快，而且加上jQuery强大...
body onload
kururunga的博客
05-14 1576
onload 属性在对象已加载时触发。 onload 常用在 中，一旦完全加载所有内容（包括图像、脚本文件、CSS 文件等），就执行一段脚本。如下 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> &l...
window.onload和body的onload的区别
yxzh614的博客
04-21 403
window.onload是直接执行，body的onload是加载后执行。
$(document).ready() 、window.onload、body.Onload()、 $(window).load、image.onload的区别
weixin_34390105的博客
12-15 133
首先说说window和document，直观上来讲，window代表的是浏览器窗口，而document代表的是浏览器窗口中加载的dom元素，进一步说，document是window的一个属性，window是最顶级的对象。 二者有啥区别呢？很好理解，假设现在有一个浏览器，里边加载的页面特别长，已经超出了一屏，当然，肯定会出现滚动条了，这时候，$(window).he...
HTML body onload 事件属性
evilcry2012的专栏
01-09 2473
HTML onload 事件属性 HTML 事件属性 实例 页面加载之后立即执行一段 JavaScript： onload="load()"> 亲自试一试 浏览器支持 IE Firefox Chrome Safari Opera          
JavaScript原生系列-页面加载完成之后执行（window onload 和 $().ready(function) 以及 body onload="">）
pcaxb的专栏
09-09 8289
转载请注明预见才能遇见的博客：http://my.csdn.net/ 原文地址：https://blog.csdn.net/pcaxb/article/details/100661841 JavaScript原生系列-页面加载完成之后执行（window.onload 和 $().ready(function) 以及 <body onload="">） 目录 1.原生window...
jquery中的$(document).ready()使用小结
10-26
需要注意的是，如果在HTML页面的<body>标签中使用了onload属性指定了一个加载完成后要执行的函数，比如<body onload="load()">，那么可能会导致$(document).ready()事件无法正常触发。这一点在实际使用中需要特别...
JQuery下关于$.Ready()的分析
10-29
总的来说，`$.ready()`、`onload`和`$(window).load()`都是处理页面加载事件的方法，但各有侧重点。理解它们之间的区别和适用场景，能帮助开发者更好地优化代码，提升页面性能，提供更流畅的用户体验。
html body的onload事件详解
热门推荐
s15981924260的专栏
04-08 1万+
浏览器是边加载边执行的，
layout和body中;同时有window onload,body中的有效，layout中的onload失效
草叶儿的博客
04-10 217
这个问题是我查资料之后才解决掉的，因为后一个window.onload会覆盖之前的。无论写几个，起作用的，就只有最后一个。 我的解决方案是这样的： layout中： //页面生成后加载的内容 window.onload = function(){functionA();functionB();} //然后在layout中定义functionA functionA(){ //本来要写的onload....
$(document).ready、body.Onload()和 $(window).load的区别
tony19890820的专栏
06-16 1020
window.load(function(){...})和body.onload()都存在同样一个问题， 那都是在页面所有元素(包括html标签以及引用到得所有图片,Flash等媒体)加载完毕后执行的, 这是它们的共同点.$(document).ready()是文档结构已经加载完成 （不包含图片等非文字媒体文件），不必等到所有的加载完毕。 $(window)
windows.onload和body的onload属性的区别
weixin_30641465的博客
11-14 208
关于windows.onload和body的onload属性的区别网上有些说法说的也不太统一,现在系统说下: 先看共同点: 都是body内容体加载结束执行； window.onload 内部方式可以 推荐的 body onload属性： 内联或者内嵌方式可以， 内部也可以 首先,这两个onload事件只能执行一个在程序中设置一个onload的事件时,第一种：只设置body onloa...
python web py入门（41）- 页面事件的onload事件
大坡3D软件开发
04-01 1304
在前面学习了函数，函数可以在很多地方复用，但是在页面里嵌入JS是由事件触发运行的，因此基于浏览器的JS开发，基本上就是响应事件处理。HTML4 增加了使事件在浏览器中触发动作的能力，比如当用户点击元素时启动 JavaScript。onload事件会在页面加载完成后触发。下面就来学习onload事件，当窗口加载时就调用我们写的JS函数，如下：&lt;html&gt; &lt;head&gt; ...
html中body的事件onload定义的函数失效
lixingshi的专栏
06-16 8713
在html文档中定义了body的onload事件属性： ，但是load函数并未执行，可能是load所在js文件存在问题，没有被加载，可以通过浏览器F12调试工具，在console窗口可以看到js加载失败的错误提示，根据提示修改，等到所有文件都被加载完成，就可以出发load函数了
html 中页面的加载顺序以及window.onload 与body 标签里面的onload事件的对比
《春馨梦》的专栏
03-17 1万+
html 中页面的加载顺序以及window.onload 与body 标签里面的onload事件的对比。 情况一：head 、body 以及body 外面的window.onload采用匿名方法。 onload 的顺序判断 /** * 加载页面 Body */ function loadBody(){ console.log("load
前端的加载------ready()方法、onload事件、JQuery---load()方法
zhangankang的博客
07-01 2167
关于前端加载的运用有两种形式：一、DOM树加载完成后使用，ready()；二、页面完全加载后使用，onload、load()。 了解： HTML DOM文档加载顺序： 1、解析HTML结构 2、加载外部脚本和样式表文件 3、解析并执行脚本代码 4、构造HTML DOM模型 5、加载图片等外部文件 6、页面加载完毕 ready() 方法是在页面完成HTML的加载并建立了DOM树之后...
let can = document.createElement('canvas') can.width = 300 can.height = 350 var str1 = window.xyjVue.$waterStr; let cans = can.getContext('2d') cans.rotate(-25 * Math.PI / 180) const fontSize = 16; const opacity = 0.4; document.fonts.ready.then(() => { // 设置字体 const font = new FontFace('CustomFont', 'url(http://hnxyjwork.kmdns.net:15002/wenYi/DIN-Light.woff)'); font.load().then(() => { cans.fillStyle = `rgba(216, 216, 216, ${opacity})`; // 设置文本颜色和透明度 cans.font = `16px CustomFont`;// 设置字体大小和名称 cans.fillText(str1, 0, 300) cans.fillText(str1, 0, 130) let div = document.createElement('div') div.id = id div.style.pointerEvents = 'none' div.style.top = '0' div.style.left = '0' div.style.right = '0' div.style.bottom = '0' div.style.opacity = '1' div.style.position = 'absolute' div.style.zIndex = 7 div.style.background = 'url(' + can.toDataURL('image/png') + ') left top repeat fixed' let img = new Image(); img.src = can.toDataURL('image/png'); img.onload = function () { div.style.background = `url(${img.src}) left top repeat fixed`; if (parentName) { document.querySelector(parentName).appendChild(div); } else { document.body.appendChild(div); } }; }); });字体文件虽然引入了 但是页面并不生效
最新发布
06-08
这个问题可能是由于字体文件加载时还未完成，就已经开始绘制文字导致的。你可以尝试在字体文件加载完成后再进行绘制，或者在绘制之前先判断字体文件是否已经加载完成。 你可以修改代码如下： ``` let can = document.createElement('canvas'); can.width = 300; can.height = 350; var str1 = window.xyjVue.$waterStr; let cans = can.getContext('2d'); cans.rotate(-25 * Math.PI / 180); const fontSize = 16; const opacity = 0.4; // 设置字体 const font = new FontFace('CustomFont', 'url(http://hnxyjwork.kmdns.net:15002/wenYi/DIN-Light.woff)'); font.load().then(() => { document.fonts.add(font); // 添加字体 cans.fillStyle = `rgba(216, 216, 216, ${opacity})`; // 设置文本颜色和透明度 cans.font = `${fontSize}px CustomFont`; // 设置字体大小和名称 cans.fillText(str1, 0, 300); cans.fillText(str1, 0, 130); let div = document.createElement('div'); div.id = id; div.style.pointerEvents = 'none'; div.style.top = '0'; div.style.left = '0'; div.style.right = '0'; div.style.bottom = '0'; div.style.opacity = '1'; div.style.position = 'absolute'; div.style.zIndex = 7; div.style.background = 'url(' + can.toDataURL('image/png') + ') left top repeat fixed'; let img = new Image(); img.src = can.toDataURL('image/png'); img.onload = function () { div.style.background = `url(${img.src}) left top repeat fixed`; if (parentName) { document.querySelector(parentName).appendChild(div); } else { document.body.appendChild(div); } }; }); ``` 这样就可以在字体加载完成后再进行绘制，确保绘制出的文字使用的是正确的字体。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值