【JS】怎样用原生JS实现jQuery的ready方法
Jquery中$(document).ready()的作用类似于传统JavaScript中的window.onload方法,只是与window.onload方法还是有差别的。
总的来说,window.onload()方法是必须等到页面内包含图片的全部元素载入完成后才干运行。
$(document).ready()是DOM结构绘制完成后就运行,不必等到载入完成。
详细一些。能够从下面几方面对照它们的差别:
1.运行时间
window.onload必须等到页面内包含图片的全部元素载入完成后才干运行。 $(document).ready()是DOM结构绘制完成后就运行,不必等到载入完成。
2.编写个数不同
window.onload不能同一时候编写多个,假设有多个window.onload方法,仅仅会运行一个。
$(document).ready()能够同一时候编写多个。而且都能够得到运行。
3.简化写法
window.onload没有简化写法。
$(document).ready(function(){})能够简写成$(function(){});
在一些开发中。一般用到javascript。我是採用jquery的模式,也就是大多数时候,第一行写的是:
$(document).ready(function(){
...
});
这个时候,不一定要等全部的js和图片载入完成。就能够运行一些方法。只是有些时候,必需要等全部的元素都载入完成。才干够运行一些方法的时候,比方说,部分图片或者什么其它方面还没有载入好,这个时候,点击某些button,会导致出现意外的情况,这个时候,就需要用到:
$(window).load(function() {
$("#btn-upload").click(function(){ //比方说:
uploadPhotos();
});
});
以浏览器装载文档为例,在页面载入完成后。浏览器会通过 Javascript 为 DOM 元素加入事件。在常规的 Javascript 代码中,通常使用 window.onload 方法,而在 Jquery 中,使用的是 $(document).ready() 方法。 $(document).ready() 方法是事件模块中最重要一个函数,能够极大的提高 Web 应用程序的速度。
另外,须要注意一点,因为在 $(document).ready() 方法内注冊的事件,仅仅要 DOM 就绪就会被运行,因此可能此时元素的关联文件未下载完。
比如与图片有关的 html 完成下载,而且已经解析为 DOM 树了。但非常有可能图片还没有载入完成,所以比如图片的高度和宽度这种属性此时不一定有效。要解决问题,能够使用 Jquery 中还有一个关于页面载入的方法 ---load() 方法。 Load() 方法会在元素的 onload
事件中绑定一个处理函数。假设处理函数绑定给 window 对象。则会在全部内容 ( 包含窗体、框架、对象和图像等 ) 载入完成后触发。假设处理函数绑定在元素上,则会在元素的内容载入完成后触发。
Jquery代码例如以下:
$(window).load(function (){
// 编写代码
});
等价于 JavaScript 中的下面代码
Window.onload = function (){
// 编写代码
}
那么,对于某些特殊需求,不希望使用jQuery。但又想实现jQuery的ready方法。
该怎样用原生JS实现jQuery的ready方法呢?以下是当中之中的一个的做法:
function ready(fn){
if(document.addEventListener){ //标准浏览器
document.addEventListener('DOMContentLoaded',function(){
//注销时间,避免重复触发
document.removeEventListener('DOMContentLoaded',arguments.callee,false);
fn(); //运行函数
},false);
}else if(document.attachEvent){ //IE浏览器
document.attachEvent('onreadystatechange',function(){
if(document.readyState=='complete'){
document.detachEvent('onreadystatechange',arguments.callee);
fn(); //函数运行
}
});
}
}
Author:致知
Sign:路漫漫其修远兮,吾将上下而求索。
【JS】怎样用原生JS实现jQuery的ready方法的更多相关文章
- jquery的ready方法(DOM是否加载完)详解与使用
jquery的ready方法(准备DOM触发)还是比较复杂的,我们先看流程图:
- [js插件开发教程]原生js仿jquery架构扩展开发选项卡插件
jquery插件一般是这么干的: $.fn.插件名称 = function(){}, 把插件的名称加在.fn上,在源码里面实际上是扩展到构造函数的原型对象上,如果你没看过jquery的源代码,或者你曾 ...
- js 小工具-- 原生 js 去除空格
// 原生js 去除字符串空格 <script type="text/javascript"> String.prototype.trim = function (){ ...
- jQuery的ready方法实现原理分析
jQuery中的ready方法实现了当页面加载完成后才执行的效果,但他并不是window.onload或者doucment.onload的封装,而是使用 标准W3C浏览器DOM隐藏api和IE浏览器缺 ...
- js中的原生Ajax和JQuery中的Ajax
AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML). js中的Ajax: 参数介绍: open(String method,Str ...
- jQuery里ready方法用原生js实现原理
function ready(fn){ if(document.addEventListener){ //标准浏览器 document.addEventListener('DOMContentLoad ...
- js设置cookie(原生js)
cookie 与 session 是网页开发中常用的信息存储方式.Cookie是在客户端开辟的一块可存储用户信息的地方:Session是在服务器内存中开辟的一块存储用户信息的地方. JavaScrip ...
- 无限循环轮播图之JS部分(原生JS)
JS逻辑与框架调用, <script type="text/javascript"> var oBox = document.getElementById('box') ...
- 创建一个js日历(原生JS实现日历)
前言 方法是有参考网上一些资料的,比如闰年的判断,比如每个月第一天是星期几的判断.不说太多,拆分出一个个函数,希望能描述尽可能的清晰明了. 一,判断闰年 //判断闰年 function runNian ...
随机推荐
- 利用CORS解决前后端分离的跨域资源问题
CORS 即CrossOrigin Resources Sharing-跨域资源共享,它定义了一种浏览器和服务器交互的方式来确定是否允许跨域请求.它是一个妥协,有更大的灵活性,但比起简单地允许所有这些 ...
- JavaScript中的常用的数组操作方法
JavaScript中的常用的数组操作方法 一.concat() concat() 方法用于连接两个或多个数组.该方法不会改变现有的数组,仅会返回被连接数组的一个副本. var arr1 = [1,2 ...
- RabbitMQ学习总结(4)——分发任务在多个工作者之间实例教程
一.Work Queues(using the Java Client) 走起 在第上一个教程中我们写程序从一个命名队列发送和接收消息.在这一次我们将创建一个工作队列,将用于分发耗时的任务在多个工 ...
- [terry笔记]python FTP
如下是作业,用python做一个ftp,主要利用socket. server端在linux下运行,在client端可以执行shell命令(静态的) 在client端输入get xxx,即可下载. 在c ...
- cogs 304. [NOI2001] 方程的解数(meet in the middle)
304. [NOI2001] 方程的解数 ★★☆ 输入文件:equation1.in 输出文件:equation1.out 简单对比时间限制:3 s 内存限制:64 MB 问题描述 已 ...
- 嵌入式外部中断控制编程方法论—比較CC2541(51核)和S5PV210(ARM核)
这是一篇阐述怎样对嵌入式SOC外部中断进行控制编程的方法论文章.希望读者理解本篇文章后.能够具备对市场上全部已经面世和将来面世的嵌入式芯片的外部中断进行控制编程的能力. 笔者原创的技术分享一直都恪守下 ...
- 【Java】【Flume】Flume-NG启动过程源代码分析(一)
从bin/flume 这个shell脚本能够看到Flume的起始于org.apache.flume.node.Application类,这是flume的main函数所在. main方法首先会先解析sh ...
- bzoj4554: [Tjoi2016&Heoi2016]游戏(二分图匹配)
4554: [Tjoi2016&Heoi2016]游戏 题目:传送门 题解: 一道很牛逼的匈牙利..和之前模拟赛的一道题有点相似(不过这题不用完美匹配) 我们可以把连续的行和列全部编号(如果之 ...
- 在Jquery里格式化Date日期时间数据
在Jquery里格式化Date日期时间数据: $(function(){ //当前时间格式化yyyy-MM-dd HH:mm:ss alert(timeStamp2String(new Date(). ...
- Storm Spout
本文主要介绍了Storm Spout,并以KafkaSpout为例,进行了说明. 概念 数据源(Spout)是拓扑中数据流的来源.一般 Spout 会从一个外部的数据源读取元组然后将他们发送到拓扑中. ...