document.load和ready的区别
时间: 2023-04-27 10:02:08 浏览: 89
document.load和ready都是JavaScript中常用的事件处理程序,它们用于在HTML文档完全加载后执行JavaScript代码。不过,它们的实现方式有所不同。
document.load事件表示当页面的所有元素(包括图像、CSS文件、JavaScript文件等)都已经加载完毕时触发。这意味着当页面上的所有内容都完全加载后,才会执行注册在document.load事件上的JavaScript代码。由于页面上的所有内容都必须完全加载才能触发该事件,因此这可能会导致页面加载速度变慢。
相比之下,ready事件则表示当DOM(文档对象模型)准备就绪时触发。这意味着在DOM结构构建完成后就可以执行JavaScript代码。这种方法更快,因为在资源文件完全加载之前就可以开始执行JavaScript代码。
因此,如果您想在页面上的所有内容都完全加载后再执行JavaScript代码,可以使用document.load事件。如果您只关心DOM结构是否准备就绪,可以使用ready事件。在实际应用中,更常用的是ready事件。可以通过jQuery中的$(document).ready()方法来注册ready事件。
相关问题
$(window).load()事件用法
`$(window).load()`事件是在所有页面资源都已经加载完成后触发的事件,与`window.onload`事件类似。它是jQuery库提供的一个事件,可以用来执行一些需要等待所有资源加载完成后才能进行的操作。
`$(window).load()`事件的用法如下:
```javascript
$(window).load(function() {
// 所有页面资源都已经加载完成后执行的代码
});
```
在这个事件中,可以进行一些需要等待所有资源加载完成后才能进行的操作,例如操作图片、计算元素的位置、执行动画效果等等。
需要注意的是,`$(window).load()`事件触发的时间比`$(document).ready()`事件(或者说DOMContentLoaded事件)要晚,因为它需要等待所有资源加载完成后才能触发。因此,如果只需要操作DOM元素,就可以使用`$(document).ready()`事件或者DOMContentLoaded事件,如果需要操作图片等资源,可以使用`$(window).load()`事件。
另外,从jQuery 3.0版本开始,`$(window).load()`事件已经被废弃,建议使用`$(window).on('load', function(){})`来代替。
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); } }; }); });字体文件虽然引入了 但是页面并不生效
这个问题可能是由于字体文件加载时还未完成,就已经开始绘制文字导致的。你可以尝试在字体文件加载完成后再进行绘制,或者在绘制之前先判断字体文件是否已经加载完成。
你可以修改代码如下:
```
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);
}
};
});
```
这样就可以在字体加载完成后再进行绘制,确保绘制出的文字使用的是正确的字体。