onload的一些小坑

有关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)

有些时候，我们会有这样的需求，把一张图片创建出来后，想获取其高度
由图我们可以看出，直接获取是不能读取创建出来的图片的高度的，
图片是有一个加载的过程的，我们需要在图片加载完成后，才能正确读取出其高度