onload事件:页面加载(文本和图片)完毕的时候,

onload的作用:

  1. JS加载时和html是同步加载的,如果使用元素在定义元素之前易报错;

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script>
    var btn=document.getElementById("btn");
    btn.onclick=function(){
    alert("Hello JavaScript!");
    }; </script>
    </head>
    <body>
    <button id="btn">点击</button>
    </body>
    </html>

  2. 整个页面上所有元素加载完毕后再执行js的内容

window.onload可以预防使用标签在定义之前,即实现JS代码于html页面的异步加载

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
window.onload=function(){
var btn=document.getElementById("btn");
btn.onclick=function(){
alert("Hello Javascript!");
}
}
</script>
</head>
<body>
<button id="btn">点击</button>
</body>
</html>

同步与异步:

1.生活中同步是所有的事一起执行,异步是事件一件一件的执行

2.web中同步是事件一件一件的执行,异步是所有的事一起执行

onload事件的更多相关文章

  1. JavaScript 中 onload 事件绑定多个方法

    当需要调用的方法较多时,我们可以进一步优化,编写一个专门用于绑定 onload事件的方法: function addLoadEvent(func) { //把现有的 window.onload 事件处 ...

  2. jQuery $(document).ready()和JavaScript onload事件

    jQuery $(document).ready()和JavaScript onload事件 Why we need a right time? 对元素的操作和事件的绑定需要等待一个合适的时机,可以看 ...

  3. onload事件-----addLoadEvent函数

    在给网页加一些特效时经常要在<body>中加入“onload”事件,即在网页加载完后执行某事件,例如:<body onload=”alert(‘欢迎光临!')”,但这样做有个大的缺陷 ...

  4. 共享onload事件

    在做前端工作中,我们想要设置某个函数prepare,让它在网页加载完毕后执行,会触发一个onload事件,这个事件与windows对象相关联,必须把prepare函数绑定到这个时间上,语法如下:win ...

  5. javascript中onload事件如何绑定及执行顺序

    onload事件,顾名思义就是为了js程序能够在网页加载成功过后进行执行.对于放在head里面的js来说,非常必要. 如何给网页绑定onload,主要有三种方式: window.onload=func ...

  6. jQuery的document ready与 onload事件——你真的思考过吗?

    在进行实验和资料查询时,我遇到了几个关键问题: 1. window.onload到底是什么加载完触发? 2. body为什么会有onload事件? 3. 为什么是window.onload,而不是do ...

  7. 【HTML】Iframe中的onload事件

    当iframe.src重新指定一个url时会重新执行iframe的onload事件 <iframe id="indexFrame" name="index" ...

  8. 学习JQuery的$.Ready()与OnLoad事件比较

    $(document).Ready()方法 VS OnLoad事件 VS $(window).load()方法接触JQuery一般最先学到的是何时启动事件.在曾经很长一段时间里,在页面载入后引发的事件 ...

  9. $(document).Ready()方法 VS OnLoad事件 VS $(window).load()方法

    $(document).Ready()方法 VS OnLoad事件 VS $(window).load()方法接触JQuery一般最先学到的是何时启动事件.在曾经很长一段时间里,在页面载入后引发的事件 ...

  10. (js有关图片加载问题)dom加载完和onload事件

    引用旺旺的话...哈哈哈DOMContentLoaded事件表示页面的DOM结构绘制完成了,这时候外部资源(带src属性的)还没有加载完.而onload事件是等外部资源都加载完了就触发的.$.read ...

随机推荐

  1. H5学习的例子

    https://github.com/NalvyBoo/HTML5   https://github.com/yujinjin/fans   github看到这里 https://github.com ...

  2. Django 学生信息 添加 功能 遇到的问题.

    1  添加 班级信息时的问题 (grade为外键) 原因是 grade 必需接收 一个 实例, 而我交是一个 str字符串, if request.method == 'POST': data = { ...

  3. Redis 高级特性

    Redis 数据结构 Redis 常用的数据类型主要有以下五种: String Hash List Set Sorted set Redis 内部使用一个 redisObject 对象来表示所有的 k ...

  4. German Collegiate Programming Contest 2018​ A. Attack on Alpha-Zet

    题目链接https://nanti.jisuanke.com/t/28852 题目大意是 h*w 的平面,每两个点有且仅有一条路径,类似于封闭的联通空间,然后在这h*w个点中选取(标记为1~N)N个点 ...

  5. Java 接口多继承

    按照理解,一般都是说Java 类是单继承,但可以实现多个接口.但是可以通过接口来实现类的多继承.(如何通过接口来实现多继承???) 那么就一直以为Java里面是单继承,今天看FutureTask源码的 ...

  6. Py西游攻关之RabbitMQ、Memcache、Redis

    Py西游攻关之RabbitMQ.Memcache.Redis   RabbitMQ 解释RabbitMQ,就不得不提到AMQP(Advanced Message Queuing Protocol)协议 ...

  7. ps高级磨皮的7个步骤

    1.打开图片 2. 进入通道看红绿蓝哪个通道痘比较明显拖拽复制拷贝哪个通道! 3.选中拷贝的通道--执行滤镜--其他--高反差保留 4.在执行图像--计算(混合模式强光)--计算三次 5.选alpha ...

  8. 找不到phpize

    yum install php-devel 报错如下: 解决办法: yum install php71w-devel

  9. redis在游戏服务器中的使用初探(四) redis应用

    文章系列先介绍环境搭建 介绍redis操作和代码编写运行  这是典型的实战工程过程.那么我们为何要使用redis而不是常规的数据库比如 mysql呢? 因为KV内存数据库最大的优势所有数据全部存储在内 ...

  10. struts2遇到的一个问题。

    2018-09-12 好几年没配过struts2了,今天想用最新版的配一下,一直不成功,后来才知道,一堆红色输出里面有这样一句 ERROR StatusLogger No log4j2 configu ...