有关onload的一些小坑
// jq的ready事件
$(document).ready(function () {
console.log('jq的ready事件触发了==>');
})
// 原生的onload事件
window.onload = function () {
console.log('onload方法触发了==>')
}
console.log('事件外的东西触发了')
很明显可以看出,写在事件外的最先触发,然后到jq的ready ,再到原生的onload事件
jq的ready是等着页面dom,css等加载完毕后触发
原生的onload事件是等待dom树,css和图片等资源加载完毕后触发
<img class="my-girlfriend"
src="http://hbimg.b0.upaiyun.com/11e8a5737c6814494ab377f1abf31b91fb759b651b6a99-CzDk5b_fw658" alt="">
//不写在load里面
let img = document.querySelector('.my-girlfriend');
console.log("获取图片高度==>", img.clientHeight);
// jq的ready事件
$(document).ready(function () {
// console.log('jq的ready事件');
let img = document.querySelector('.my-girlfriend');
console.log("获取图片高度==>", img.clientHeight);
})
// 原生的onload事件
window.onload = function () {
let img = document.querySelector('.my-girlfriend');
console.log("获取图片高度==>", img.clientHeight);
}
很明显,把获取图片写着等待页面加载的函数里面时,能正确获取图片高度
let body = document.body;
let img = document.createElement('img');
img.className = 'my-girlfriend'
img.src = 'http://hbimg.b0.upaiyun.com/11e8a5737c6814494ab377f1abf31b91fb759b651b6a99-CzDk5b_fw658';
body.appendChild(img);
img.onload = () => {
let ele2 = document.querySelector('.my-girlfriend');
console.log('onload事件中,获取图片的高度==>', ele2.clientHeight)
}
let ele = document.querySelector('.my-girlfriend');
console.log('获取图片的高度==>', ele.clientHeight)
有些时候,我们会有这样的需求,把一张图片创建出来后,想获取其高度
由图我们可以看出,直接获取是不能读取创建出来的图片的高度的,
图片是有一个加载的过程的,我们需要在图片加载完成后,才能正确读取出其高度