ready、onload概念及浅谈事件执行顺序

页面加载完成有两种事件
1.ready事件:表示文档结构已经加载完成(不包含图片等非文字媒体文件);

JQ写法:$(document).ready(function(){})可以简写成$(function(){});

2.onload事件,指示页面包含图片等文件在内的所有元素都加载完成。(ready 在onload 前加载);
图片描述

可以做个这样的页面优化(在页面还未执行完load事件前,加载等待动画我用是gif,模仿此网站:https://www.firecode.io/ 最近在学习bootstrap, 我是以此网站为模仿对象学习);

    $(window).load(function () {
        $(window).scrollTop(0);  //让页面返回顶部(算是一个优化,可以不加);
        $('#loader').fadeOut();  //在load事件执行完后,id为loader的元素隐藏,展现完成页面。
    })

图片描述

注:<script> 标签中js代码的位置正常情况下决定了代码(函数,对象赋值等等行为)的执行顺序,同名的函数将会被后者覆盖, dom0级中为同一对象绑定多个同一事件,只执行后者。dom2级则并存(为什么会这样,原因我还不知道,日后补全);

        window.onclick = function () {  //被覆盖
            alert(1);
        }
        window.onclick = function () {
            alert(8);
        }
        window.addEventListener('click', function () {  //dom2级则并存
            alert(3);
        }, false);
        window.addEventListener('click', function () {
            alert(5);
        }, false);
        $(window).click(function () {
            alert(2);
        })
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值