- 浏览: 1193576 次
- 性别:
- 来自: 北京
文章分类
- 全部博客 (434)
- js (20)
- struts2 (77)
- spring (11)
- hibernate (17)
- ssh整合 (9)
- 程序例子 (4)
- 正则表达式 (8)
- JSP (20)
- IDE (15)
- 数据库 (10)
- 工作经验技巧感悟 (21)
- 程序员的幽默 (4)
- windows设置 (4)
- 名词解释 (4)
- 技术入门 (4)
- jFreeChart (16)
- OGNL (5)
- java基础 (46)
- dwr (4)
- portal (1)
- 示例用到的附件 (0)
- 优秀程序员45个习惯 (1)
- webService (1)
- shell (3)
- ibatis (3)
- 开发工具 (1)
- OS (3)
- xmlbean (2)
- design_pattern (0)
- error (1)
- testng (2)
- python (18)
- hadoop (21)
- mapreduce (9)
- Hive (0)
- HBase (0)
- ubuntu (22)
- 多线程 (7)
- 自我改进 (6)
- 设计模式 (1)
- ssh (2)
- ant (4)
- guake (2)
- 云计算 (9)
- hdfs (3)
- 大数据 (1)
- 电信业务 (1)
- maven (2)
- svn (5)
- UML (1)
- 待处理问题 (2)
- log4j (1)
- css (1)
- LevelDb (0)
- thrift (6)
- 辅助工具 (3)
- 算法 (1)
- tornado (0)
- twisted (1)
- jvm (0)
- 图书 (1)
- 其他 (1)
- oracle (2)
- mvn (1)
- 私人信息 (0)
- nio (1)
- zookeeper (1)
- JavaIO (3)
- mongodb (1)
- java-高级 (6)
- spring-深入 (1)
- tomcat (1)
- quartz (1)
- 面试题 (1)
- redis (3)
- EJBCA (0)
- spring-3.0 (1)
- memcache (3)
- 性能检测 (1)
- android (0)
- 开源项目 (1)
- 将博客搬至CSDN (0)
- 架构之路 (1)
最新评论
-
pjwqq:
“子类对象”都拥有了“父类对象的一个实例的引用”我晕,应该是“ ...
java继承--父类属性的存放位置 -
gwgyk:
关于楼主最后的问题,我想可能是这样:InputFormat默认 ...
eclipse 运行hadoop wordcount -
fanjf:
上述7点基本具备,可惜现在因为项目需要,做管理方面工作!
如何判断自己是否具有成为一名优秀程序员的潜质 -
摸爬滚打NO1:
链接已经失效
Eclipse添加JSEclipse 插件(js插件) -
younglibin:
看了以上7条, 自己 也不知道是否能够对上, 感觉没一点都有那 ...
如何判断自己是否具有成为一名优秀程序员的潜质
学习js的时候,经常会遇到这样的问题,如何控制dom、js在页面上的加载顺序。
Peter Michaux 有一篇文章非常具体地分析了各种控制 js 装载过程的方法和优劣。
首先可能会用到 defer来强制页面加载完成后来再运行js,像这样:
看似用起来没什么问题,但是发现无法兼容Mozilla。
既然这样不行,就只好换种方法,利用 window.onload 来捕获页面的载入事件。
在js文件里:
alert("load over");
}
这一切的一切想必大家都是很熟悉的了,但是,之后就没有问题了么?假设页面dom里有一张图片,像这样:
而这张图片又非常之大,那么在dom加载完毕之前,js是无法执行的。问题就在于假设dom提供了用户交互的功能。例如按钮,输入表单等,这个时候他们已经是被呈现了的,因此就很有可能产生无效的用户行为。
我们不能指望用户会安分守己地等待页面显示加载完毕后再发生动作,而要把用户考虑成随时随刻会到处乱点的朋友。
这个问题又如何解决呢?既然我们需要页面结构输出后执行js,我们不妨把js入口函数定义在页面最下面好了。
<script src="x.js" type="text/javascript"></script>
</head>
<body>
......
<img src="picture.jpg" >
<script type="text/javascript">init();</script>
</body>
这样就达到我们的目的了,页面结构输出完毕后就执行js,不用考虑图片的加载。
但是在文档末尾嵌入一条js脚本,毕竟容易被忽略,把关键的程序入口放在这种渺小的角落,总觉得不太合适。那有什么预留退路的方法没有呢?
我们可以把结尾的脚本稍微修改一下:
<script src="x.js" type="text/javascript"></script>
</head>
<body>
......
<img src="picture.jpg" >
而在js里预先把入口定义给onload事件:
alert("load over");
}
这时候页面结构加载完毕后就会调用onload函数,而即使漏写了dom里的onload入口,js自身里的onload定义也会在页面加载完毕后执行,这样退路就留出来了。
不过这时候有个问题,onload事件会执行两次,可以在js的onload实现里解决这个问题,改成这样:
window.onload = function() {
if (flag) {return;}
flag= true;
alert("load over");
}
这样似乎已经解决我们所有的问题了,不过仍然有些小遗憾,因为最后一行代码,致使行为与结构没有分离开来,要 unobtrusive 就要 unobtrusive 的彻底,为了达到完美的分离,还有很大的讨论空间。
而对于js文件内部的onload事件,我们还可以参考 Simon Willison 的addLoadEvent函数来优化:
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
if (oldonload) {
oldonload();
}
func();
}
}
}
然后,我们就可以在js里肆无忌惮地不停地将各个不同的函数添加到onload事件响应中了:
addLoadEvent(funcB);
addLoadEvent(funcC);
当然,同一个js里设置多个onload响应函数其实没什么必要,我们完全可以把funcA、funcB、funcC封装在一个函数里add,addLoadEvent函数,更理想的状态是为页面动态调用的多个js文件添加入口。
小试牛刀:
function addLoadEvent(func)
{
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
}else{
window.onload = function()
{
if (oldonload){
oldonload();
}
func();
}
}
function query(){
alert("加载成功");
}
addLoadEvent(query);
<input type="button" onClick="query();" value="加载js"/>
发表评论
-
点击table首行列名按该列内容排序+冻结窗口
2010-01-08 09:06 4361注意 : 这里的只适用于 表头的 (即:首行的)td 和显示 ... -
dwr和js来实现ajax技术
2009-12-17 16:58 2116在jsp页面 处于一个超链接: 如下图:对于处理状态 和 ... -
dom属性实例
2009-12-16 11:30 1604文档对象模型(DOM)是表示文档(比如HTML和XM ... -
js 格式化时间
2009-12-16 11:20 3872/** * 时间对象的格式化; */ D ... -
jsp页面 显示和隐藏提示信息
2009-12-04 16:01 5502function hide(){ var bloc ... -
javascript页面跳转常用代码
2009-11-30 08:56 19222009-11-16 19:20 按钮 ... -
用JS弹出窗口及参数解释
2009-11-30 08:54 1472用JS弹出窗口 ... -
js全选例子一个
2009-09-11 11:09 1596<html><head> < ... -
js中的窗体(window)
2009-09-11 10:39 1728showModalDialog() ... -
js隐藏域的显示与隐藏
2009-08-26 15:52 5024<html> <head> < ... -
js三级联动
2009-08-26 15:50 1634<html> <head> < ... -
JS函数一览100条
2009-08-26 13:15 12311.document.write(""); ... -
getElementById获得div <a> 之间的值
2009-08-24 15:53 2644get-Element-By-Id,就是通过ID来设置/返回 ... -
js中document在IE出错在Firefox正确
2009-08-24 15:51 1827Element_value = document . getE ... -
一个js登陆验证例子 经典
2009-08-24 15:16 4146<html> <head> < ... -
EL表达式
2009-08-24 09:24 1777EL表达式总是用大括号 ... -
js在jsp中的加载执行顺序
2009-08-22 11:13 4823页面上的Javascript代码是HTML文档的一部分,所以J ... -
XTREE jsp页面的tree 结构
2009-08-21 10:46 2530每个结点有一个状态叫做OPEN(打开); 如果结点为OPEN, ... -
js中cloneNode()的使用 两个例子
2009-08-20 15:41 11185cloneNode() 方法可创建指定的节点的精确拷贝。 (可 ...
相关推荐
这一篇,主要是为了说说怎么优化异步策略,并且实现了随意加载(非任意顺序加载模块),页面Ready之后加载文件。先接一下上一篇遗留下来的问题 1、页面Ready之后进行加载 2、随意添加模块 进行加载 看第一个问题,...
关于JavaScript脚本加载的问题,相信大家碰到很多。主要在几个点—— 1> 同步脚本和异步脚本带来的文件加载、文件依赖及执行顺序问题 2> 同步脚本和异步脚本带来的性能优化问题 深入理解脚本加载相关的方方面面问题...
浏览器加载和渲染html的顺序 1. IE下载的顺序是从上到下,渲染的顺序也是从上到下,下载和渲染是同时进行的。 2. 在渲染到页面的某一部分时,其上面的所有...JS的加载 1. 不能并行下载和解析(阻塞下载)。 2. 当引
之前,我们减少字节数和请求次数以及加载顺序以使页面加载的更快。如今,我们越来越多的注意到另一个影响网站性能的部分--CPU利用率。使用 jQuery和其他JavaScript框架,使节点选择和DOM操作变得越来越容易,如果...
JQuery事件之页面框架和加载后自动执行 JQuery扩展以及自动执行函数的应用 JQuery阻止事件发生 JQuery扩展 作业 第18周 内容概要 JS正则详解 JS正则详解之验证 组件BootStrap、EasyUI、JQueryUI 插件轮播 Django_...
如果进行编辑,页面将重新加载。 您还将在控制台中看到任何棉绒错误。yarn test 在交互式监视模式下启动测试运行程序。 有关更多信息,请参见关于的部分。yarn build 构建生产到应用程序build文件夹。 它在生产模式...
1.30 页面加载后消息框居中显示 1.31 创建页面固定浮动栏的方法 第2章 jQuery操作DOM元素 2.1 如何验证某个元素是否为空 2.2 检查特定的HTML元素是否存在 2.3 判断HTML元素是否嵌套 2.4 获取当前元素的索引值 2.5 ...
优化后的通用分页存储过程 sql语句 一些Select检索高级用法 SQL server 2005中新增的排序函数及应用 根据基本表结构及其数据生成 INSERT ... 的 SQL 简便的MS SQL 数据库 表内容 脚本 生成器 将表数据生成SQL脚本的...
vue-页面之间传多个参数 微信公众号扫一扫兼容问题(vue) vue 父子组件的生命周期渲染顺序 vue组件通信 React React 生命周期的理解 React 代理 小程序 小程序内嵌html-分享注意事项 小程序分包预加载和分包 微信小...
醉心于对JavaScript、jQuery和Ajax等Web开发技术的研究与实践,并长期专注于HTML页面的优化与用户体验的研究,在页面框架搭建、数据流向分析、页面静态优化方面拥有丰富的实践经验。此外,他还是微软技术方面的专家...
在不支持 JavaScript 的情况下依然可以通过普通的加载方式正常浏览网站;AJAX 加载时可以显示进度条 响应式设计,移动端完全重新设计,模仿 iOS 原生 APP;主题的图片为双倍缩放,图标是字体图标,在 Retina 屏幕下...
4.4 通过JavaScript处理页面和 服务器控件98 4.4.1 使用Page.ClientScript. RegisterClient ScriptBlock100 4.4.2 使用Page.ClientScript. 18.2.2 基于Windows的 身份验证模式615 18.2.3 基于窗体的...
引起您注意的第一件事是高速的页面加载和积极的优化。 您将找不到监视用户行为或巨大样式/图像的第三方脚本。 该网站在关闭javascript的情况下正常工作,在任何平台上都可保持快速便捷。 订阅内容 在主页上,显示...
或者 [] 来指定路径Tree-Selector 支持懒加载升级 ECharts 到 5.1.1升级 Monaco-Editor 到 0.24.0Enhancement升级 mst 到 3 的最新版本开发使用 concurrently 避免新开一个窗口data-link 优化Wizard 组件新增 ...
如果进行编辑,页面将重新加载。 您还将在控制台中看到任何棉绒错误。 npm run build 构建生产到应用程序build文件夹。 它在生产模式下正确捆绑了React,并优化了构建以获得最佳性能。 最小化构建,文件名包含...
4.4 通过JavaScript处理页面和服务器控件 98 4.4.1 使用Page.ClientScript.RegisterClient ScriptBlock 100 4.4.2 使用Page.ClientScript.Register StartupScript 101 4.4.3 使用Page.ClientScript....
要等到页面全部加载完毕才执行,注意是全部加载,包括dom,图片等其它资源。 而$(document).ready(function(){ alert("hello"); });(1) 当dom加载完就可以执行了。 代码1同时做到表现和逻辑分离。并且可以在...
05 JS的控制语句与循环 06 JS的循环与异常 07 JS的字符串对象 08 JS的数组对象 09 JS的函数对象 第42章 01 JS的函数作用域 02 JS的window对象之定时器 03 JS的history对象和location对象 04 JS的DOM节点 05 JS的...
如果您进行编辑,则页面将重新加载。 您还将在控制台中看到任何棉绒错误。npm test 在交互式监视模式下启动测试运行器。 有关更多信息,请参见关于的部分。npm run build 构建生产到应用程序build文件夹。 它在生产...
20.4节在JavaScript中调用ActionScript方法函数 20.5节经由BrowserManager改变HTML页面标题 20.6节BrowserManager解析URL 20.7节经由BrowserManager深度-链接到数据 20.8节经由BrowserManager深度-链接容器 20.9节...