- 浏览: 1434086 次
- 性别:
- 来自: 上海
文章分类
最新评论
-
luhouxiang:
写的很不错,学习了
Extjs 模块化动态加载js实践 -
kingkongtown:
如果想改成淘宝后台那样,可以在编辑器批量上传图片呢?
kissy editor 阶段体会 -
317966578:
兄弟我最近也在整jquery和caja 开放一些接口。在git ...
caja 原理 : 前端 -
liuweihug:
Javascript引擎单线程机制及setTimeout执行原 ...
setTimeout ,xhr,event 线程问题 -
辽主临轩:
怎么能让浏览器不进入 文档模式的quirks模式,进入标准的
浏览器模式与文本模式
判断页面加载完毕进行相关操作是经常碰到的问题 ,不能仅仅满足于 window.onload 或 <body onload="">。
<html> <head> <title>页面加载问题-onload-by yiminghe</title> <script> function ready() { alert(document.getElementById('i_test').value); } var addE = function() { if (window.addEventListener) { return function(el, eventName, fn, capture) { el.addEventListener(eventName, fn, (capture)); }; } else if (window.attachEvent) { return function(el, eventName, fn, capture) { el.attachEvent("on" + eventName, fn); }; } else { return function() { }; } } (); /* 标准DOM2事件添加,ie,ff兼容 ,等页面image、flash、iframe等都载入完才运行 , 在如下的 html中 若不能上126 则 等很长时间才有弹出框呢。 等同于 window.onload=ready; */ /* addE(window,'load',function() { ready(); }); */ /* ff 都不行,可见 body 没有 onload 事件 ie 报错,还没有 document.body 形成 */ /* addE(document.body,'load',function() { ready(); }); */ /** 最快的方法,我们不必等待页面image、flash、iframe等都载入完(若要获取图片属性则不要用),只要htmlDOM形成就可以了, 而这个各个浏览器有不同实现,ff 遵循了标准,而ie则没有遵循标准 在下面的例子中 ,即使上不了 126 ,也会很快提示页面载入完成 **/ function DOMOk(readyOk) { /* for Mozilla */ if (document.addEventListener) { document.addEventListener("DOMContentLoaded", readyOk, false); } /* for Internet Explorer */ if (window.attachEvent) { document.write("<s" + 'cript id="ie-deferred-loader" defer="defer" src="/' + '/:"></s' + "cript>"); var defer = document.getElementById("ie-deferred-loader"); defer.onreadystatechange = function() { if (this.readyState == "complete") { readyOk(); } }; } } DOMOk(ready); </script> </head> <body> <!-- //ie ff 兼容,非常老式,在dom2标准出现之前就有了 onload="ready()" --> <input id="i_test" value="1" /> <img src='http://mimg.126.com/logo/126logo_tsp.gif' /> </body> <script> /* 只有 ie 可以 ,可能为了兼容标准以前的ie版本,且不能放在 head 中 ,document.body尚不存在 */ // document.body.onload=ready; /* ie,ff 都不行,可见 body 没有 onload 事件 */ /* addE(document.body,'load',function() { ready(); }); */ </script> </html>
这个问题这么复杂,那么 javascript 库肯定会考虑 ,看看 extjs 的实现吧,Ext.onReady 就不解释了,原理和上相同。需要注意的是 defer 属性并不能通过动态添加脚本标签设置,而只能在页面初始阶段通过 document.write 设置!
这里使用了 script 的 defer 属性,但是这种方法有个问题,当页面包含iframe时,必须得等该页面的 iframe 载入完毕后才会触发 defer 的脚本执行。所以更好的方法是 doScroll hack :
function IEContentLoaded (w, fn) { var d = w.document, done = false, // only fire once init = function () { if (!done) { done = true; fn(); } }; // polling for no errors (function () { try { // throws errors until after ondocumentready d.documentElement.doScroll('left'); } catch (e) { setTimeout(arguments.callee, 50); return; } // no errors, fire init(); })(); // trying to always fire before onload d.onreadystatechange = function() { if (d.readyState == 'complete') { d.onreadystatechange = null; init(); } }; }
不过这种解法仍然有问题,当页面处于 iframe 中时,doScroll 实际上不会抛错 :
顶层:
<script> try{ document.documentElement.doScroll("left"); alert(2); }catch(e){ alert(3); } </script> <iframe src='http://yiminghe.xx.com/t/inner.html'/>
iframe :
<script> alert(window.top==window); //alert(window.frameElement); document.documentElement.doScroll("left"); alert(1); </script> <img src='sleep.jsp'/>
所以只能在页面在顶层时使用:
// polling for no errors
if(window==window.top)(function () { try { // throws errors until after ondocumentready d.documentElement.doScroll('left'); } catch (e) { setTimeout(arguments.callee, 50); return; } // no errors, fire init(); })();
最不好也可以用 onreadystatechange ,其complete 仍然会比window load 快,但是依然在 img load 后出发 (dean's test )。
另一点是关于使用 window.top == window 还是使用 window.frameElement 来判断是否是顶层窗口,如果使用 window.frameElement 的话还得注意 try catch 否则如果iframe和主页面不同域会报错,所以一般还是用 window.top==window好一点?
update : 2010-12-26
还是使用 window.frameElement 好,否则 ie6 下会有问题,iframe中页面如果在设置 domain 前访问了 top ,则即使 iframe 的 domain 和 外层页面一致也无法访问 window.frameElement了 :jquery ticket 4787
PS:ie9 quirks 模式并不能模拟 ie6 这种bug,quirks 应该是 5.5
结果图:
发表评论
-
continuation, cps
2013-09-12 16:49 2717起 随着 nodejs 的兴起,异步编程成为一种潮流 ... -
一种基于匹配回朔的 css3 选择器引擎实现
2013-05-07 20:40 3345一种基于匹配回朔的 css3 选择器引擎实现 介绍 C ... -
cubic-bezier 模拟实现
2013-01-05 16:34 14017cubic-bezier 曲线是 css3 动画的一个重要基石 ... -
构建前端 DSL
2012-10-11 22:10 5285目前在传统的软件开 ... -
Get cursor position and coordinates from textarea
2012-04-10 20:50 4930最近需要从 textarea 中获 ... -
兼容 ie 的 transform
2012-02-23 14:00 6340css 2d transform 是 css3 引入的一个新的 ... -
promise api 与应用场景
2012-02-07 17:34 7289promise 是 commonjs 社区中提出的异步规范,其 ... -
closure compiler 代码优化实例
2012-01-08 03:23 2771closure compiler 可以进行不少有意思的优化 ... -
write html parser
2011-12-01 02:48 2852首先需要声明 html 不能用正则表达式来直接匹配进行内容抽取 ... -
获取剪贴板数据
2011-11-07 23:31 6381兼容性: 获取剪贴板数据这块各个浏览器间存在很大的 ... -
url 映射问题
2011-11-07 21:52 3168背景 url mapping 我最早知道是作为 j ... -
tip:如何原生播放声音
2011-10-19 12:45 2896如果不想考虑浏览器间 ... -
转载:瀑布流布局浅析
2011-09-29 19:02 2788简介 如果你经 ... -
cross domain request
2011-09-29 18:39 2791场景 跨域请求是随着 ... -
基于多继承的树设计
2011-09-18 03:42 2205分类 树是一种常见 ... -
caja 原理 : 前端
2011-09-01 16:48 6944作为前端开放的基础安全保证,caja 是目前比较合 ... -
tokenization of html
2011-08-29 22:38 2680html 符号解析问题 场景: 在页面上输出包 ... -
ie 下 cloneNode 导致的属性克隆
2011-08-24 16:10 2416这个还是很值得记下,一直存在的很大隐患终于解决,由于在 ie& ... -
循环引用下的深度克隆
2011-08-04 20:39 2232深度复制和浅度复制 是当初初学 c 遇到的第一批问题,似乎使 ... -
模块的静态与动态循环依赖
2011-07-25 03:43 3196场景: 循环依赖 我是不支持的,但现实中似乎又确实需 ...
相关推荐
下面小编给大家整理了几种关于JS判断图片是否加载完成方法汇总,一起看看吧。 一、load事件 [removed] $('img').onload = function() { //code } [removed] 优点:简单易用,不影响HTML代码。 缺点:只能指定一...
}配置属性方法参数作用setGifR.drawable.*加载页面的Gif图setBackgroundColorR.color.*加载页面整体背景颜色setBtnNormalColorR.color.*加载页面按钮未按下时的颜色setBtnPressedColorR.color.*加载页面按钮按下时的...
图片懒加载又称图片延时加载、惰性加载,即在用户需要使用图片的时候加载,这样可以减少请求,节省带宽,提高页面加载速度,相对的,也能减少服务器压力。 惰性加载是程序人性化的一种体现,提高用户体验,防止一次...
2:解决方案 用客户端语言来判断用户当前的可视范围,只加载用户可视范围的内容。最主要的是图片。因为文字信息,相对较小,其他多媒体内容相对占用服务器流量更多。 3:演示例子(最后提供)4:解析 首先我们要分析...
网页中有时候需要获得图片的宽度和高度,来定义某些大小,可是这个是需要从服务端请求图片,下载到本地才能够得到的,有些js或者jquery代码在还没有加载完图片时就执行了。怎么办呢?jquery提供一个方法: 代码如下:...
减少资源加载可以明显的优化页面加载的速度,所以可以减少页面载入时立即下载的图片的数量,以提高页面加载速度,其他的图片在需要的时候再进行加载。 思路 想要实现以上的目标,有几个地方需要思考。 1、如何判断...
懒加载(LazyLoad)是前端优化的一种有效方式,极大的提升用户体验,图片一直是页面加载的流浪大户,现在一张图片几兆已经是很正常的事,远远大于代码的大小。 原理:页面加载后只让文档可视区内的图片显示,其它不...
代码隐藏页模型与单文件页模型不同的是,代码隐藏页模型将事物处理代码都存放在cs文件中,当ASP.NET网页运行的时候,ASP.NET类生成时会先处理cs文件中的代码,再处理.aspx页面中的代码。这种过程被成为代码分离。 ...
iframe个人感觉最独特的应用之一就是配合P3P协议可以实现跨域写入cookie(好象除此之外,还没找到更有效的办法),但是有时候我们不知道这个iframe页面是否执行完毕,有没有办法判断iframe里的页面是否load完成了呢?...
代码如下:[removed] var firsty;...//判断改变了没有 function onloadload()//给全局变量赋最初值 在页面onload事件中调用<body onload=”onloadload()”> { firsty = document.getElementByI
(3)针对页面自适应问题,本文结合渐进增强以及拥抱流式布局的思想,同时研究利用了移动设备的视口特性,实现跨分辨率、跨设备的页面自适应。 (4)针对系统的功能实现问题,通过结合利用原生态框架与HTML5的跨平台...
3:后台Load事件必须判断是否为Post请求 后台代码如下: 测试结果如下: 第二种:类似于.net MVC直接请求方法。 1:后台代码中,引入using System.Web.Services; 2:方法必须是静态修饰,且方法上面打上特性 ...
8.4 设计前往打开网页功能——Intent与Uri.parse 8.5 将网络图像网址放入Gallery中显示——URL.URLConnection.BaseAdapter 8.6 即时访问网络图文件展示——HttpURLConnection 8.7 手机气象局,实时卫星云图——...
8.4 设计前往打开网页功能——Intent与Uri.parse 8.5 将网络图像网址放入Gallery中显示——URL.URLConnection.BaseAdapter 8.6 即时访问网络图文件展示——HttpURLConnection 8.7 手机气象局,实时卫星云图——...
}) 框架打开后设置地址到一个空页面就可以避免这个提示但有个问题 就是设置src后会触发load事件,会导致循环加载所以需要设置一个参数 等触发完正常事件后 做一个标记load完后判断一下 代码如下:$(“iframe[name=hi]...
8.4 设计前往打开网页功能——Intent与Uri.parse 8.5 将网络图像网址放入Gallery中显示——URL.URLConnection.BaseAdapter 8.6 即时访问网络图文件展示——HttpURLConnection 8.7 手机气象局,实时卫星云图——...
Vue懒惰的容器 English |介绍vue惰性容器,通过检测页面中元素的可见性,决定是否加载资源并进行渲染。为什么当页面内容超过一个屏幕时,我们通常只希望加载和呈现当前屏幕的数据。随着页面的滚动,加载并呈现以下...
lazyLoad 简单的实现图片懒加载 2021-04-17 懒加载原理: 判断当前图片是否在浏览器的可视区域范围内 如果 浏览器可视区域的高度 + 滚动条滚动的距离 >= 该图片到页面最顶部的距离 那么就加载图片 先给img标签的src...
8.4 设计前往打开网页功能——Intent与Uri.parse 8.5 将网络图像网址放入Gallery中显示——URL.URLConnection.BaseAdapter 8.6 即时访问网络图文件展示——HttpURLConnection 8.7 手机气象局,实时卫星云图——...