js中load与onload的区别
版权声明:本文为博主原创文章,未经博主允许不得转载。
在写交互的时候,加载函数使onload还是load呢?
趁机整理以防遗忘!!
js中window.onload(function)等价于jquery中$(window).onload(function)
一:window.load这个只是表明事件方法,但并未执行,比如hover、click表示事件,必须用上hover、onclick他才会执行
在页面加载渲染的时候通常会有一个Loading效果,这时就可以用它了:
JS:
$(window).load(function(){$(".loadingicon").addClass("loader-chanage");$(".loadingicon").fadeOut(300,function(){$(".loadingicon").remove();$(".maker").show().animate({"right":"0"},500);});})
$(window).load(function)页面当中的图片和其他资源加载完成之后才会执行;
二:window.onload 这个表示加载完页面所有东西以后才执行,在页面只允许出现一个onload函数,因为它可编函数个数只有一个:
JS:
<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8"><title>demo float</title></head><body><script type="text/javascript">window.onload = function(){ alert("这是1");};window.onload = function(){ alert("这是2");};</script></body>
</html>
运行结果:
三:说完以上还有一个Jquery的$(document).ready(function),网页中的所有DOM结构绘制完毕后就执行,可能DOM元素关联的内容没有加载完,例如图片以及设置的相关高度宽度等,这时可以考虑jquery中的load方法规避;另外$(document).ready(function)可编写函数不限,如:
<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8"><title>demo float</title><script type="text/javascript" src="http://static.ruilife.net/static/js/jquery-1.9.1.min.js"></script></head><body><script type="text/javascript">$(document).ready(function(){ console.log("这是1");});$(document).ready(function(){ console.log("这是2");});</script></body>
</html>
运行结果:
四、document
document.write(_LoadingHtml);//监听加载状态改变document.onreadystatechange = completeLoading;//加载状态为complete时移除loading效果function completeLoading() {if (document.readyState == "complete") {var loadingMask = document.getElementById('loadingDiv');loadingMask.parentNode.removeChild(loadingMask);}}
最后总结一下:
js:window.onload页面一运行就执行该函数,执行该函数时,可能页面中的图片还没有加载完成!
jquery: $(window).load()页面中的图片或其它东西加载完成之后,执行该函数。
调用load方法的完整格式是:load( url, [data], [callback] )参数分别url地址、文件类型(php、html等)、回调函数,也支持选择器加载load("test.html #内容id名")
版权声明:本文为博主原创文章,未经博主允许不得转载。
查看原文....
js中load与onload的区别相关推荐
- js中 onreadystatechange 和 onload的区别
IE的script 元素只支持onreadystatechange事件,不支持onload事件.FF的script 元素不支持onreadystatechange事件,只支持onload事件. 如果要 ...
- Js中的style,currentStyle,getComputedStyle()区别
Js中的style,currentStyle,getComputedStyle()区别 样式表有三种方式: 1.内嵌样式(inline Style)-是写在Tag里面的,内嵌样式只对所有的Tag有效 ...
- JS中 let 和var的区别
JS中let和var 的区别 简单介绍let var的常见变量提升 ES6可以用let定义块级作用域变量 let配合for循环的独特应用 let没有变量提升与暂时性死区 let变量不能重复声明 简单介 ...
- uniapp 获取到js文件var一个变量怎么获取到这个变量值_浅析Js中const,let,var的区别及作用域...
理解:let变量的作用域只能在当前函数中 js中const,let,var的区别及作用域_lianzhang861的博客-CSDN博客blog.csdn.net 全局作用域中,用 const 和 l ...
- js中的extend的用法及其JS中substring与substr的区别
1. JS中substring与substr的区别 之前在项目中用到substring方法,因为C#中也有字符串的截取方法Substring方法,当时也没有多想就误以为这两种方法的使用时一样的. ...
- js中几个对象的区别和用法
js中几个对象的区别和用法 今天总结一下js中几个对象的区别和用法: 首先来说说 parent.window与top.window的用法 "window.location.href" ...
- js中DOM, DOCUMENT, BOM, WINDOW 区别
全栈工程师开发手册 (作者:栾鹏) js系列教程6-BOM操作全解 js系列教程7-DOM操作全解 js中DOM, DOCUMENT, BOM, WINDOW 区别 DOM 全称是 Document ...
- js中click()与onclick()的区别
由一个简单示例到 js中click()与onclick()的区别 之前朋友在学习js的时候遇到一个有意思的问题. 先贴一份代码说一下代码构成 这里是html结构 <ul><li> ...
- js中parentNode和parentElement的区别和用法
了解本篇的基础必须知道什么是节点,关于html dom节点知识点和节点类型的知识,分别看<js节点都有哪些类型?怎么判断是哪种节点类型?>和<js属性节点获取和移除>,下面直接 ...
最新文章
- linux进程自动关闭与dmesg的使用
- android 检查网络连接状态实现步骤
- 一生应该感谢的十种人
- SVN服务器搭建和使用(一)
- Tomcat服务OTA发布J2ME应用(eclipse开发环境)
- js-数组方法的使用和详谈
- 怎么调整磁盘分区的大小
- sql 中实现打乱数据的排序
- java 类型推理_java 11 局部变量类型推断
- 基于短文本的食源性疾病事件探测技术
- 如何通过鸿蒙生态赚钱?
- 实现一个简单的银行转账操作
- IDEA编译通过能运行但是出现红色下划线
- JQuery动态增加删除元素
- Linux shell脚本基础学习(上)
- C# 隐藏最大化、最小化和关闭三个按钮
- 币圈投资必败的5种“韭菜”人格
- Android WallpaperManager 同时设置桌面壁纸与锁屏的问题
- CCNP课堂练习一:详解交换机vlan的介绍及通过交换机从逻辑上划分区域配置
- 【Introduction】人类大脑