domcontentloaded ajax,Ajax优化(1)

很久没有来百度空间看看了,一直忙武林三国游戏, 这款webgame目前已经进入收尾阶段, 今天来到这儿,突然觉得留下点什么比较好, 呵呵.. ..

想了想, 就取了"Ajax优化"这个题目, 将一系列同行们可能没有用到 or 没有注意 or 发现但没有去处理的细节记录下来.

DOMContentLoaded是firefox下特有的Event, 当所有DOM解析完以后会触发这个事件。

与DOM中的onLoad事件与其相近。但onload要等到所有页面元素加载完成才会触发, 包括页面上的图片等等。

如果页面的图片很多的话, 从用户访问到onload触发可能需要较长的时间, 而在Ajax运用中, 常常需要在onload中加入许多初始化的动作, 如果由于网络问题引起的图片加载过慢( 见: Ajax优化(2) — lazierLoad img && js), 则必然影响用户的体验。

在这种情况下firefox的DOMContentLoaded事件, 恰恰是我们需要的。

目前,跨平台的DOMContentLoaded的解决方案有很多, 比如jQuery, Prototype…等等, 其实现原理大同小异.

在项目中, 我使用了Prototype工具, 以往调用初始化的方法是:

Event.observe(window, "load", init);

现在有了DOMContentLoaded, 可以替换成如下的方法:

document.observe(‘contentloaded’, init);

最新的prototype中自定义事件已经重新命名, 使用"dom:loaded" 代替了 “contentloaded”.

document.observe(‘dom:loaded’, init);

附:

文件名称：DOMContentLoaded.js

function onContent(f){

var a = onContent,

b = navigator.userAgent,

d = document,

w = window,

c = "onContent",

e = "addEventListener",

o = "opera",

r = "readyState",

s = "");

a[c] = (function(o) {

return function() {

a[c] = function() {};

for (a = arguments.callee; ! a.done; a.done = 1) f(o ? o() : o)

}

})(a[c]);

if (d[e]) d[e]("DOMContentLoaded", a[c], false);

if (/WebKit|Khtml/i.test(b) || (w[o] && parseInt(w[o].version()) < 9))(function() { / loaded | complete / .test(d[r]) ? a[c]() : setTimeout(arguments.callee, 1)

})();

else if (/MSIE/i.test(b)) d.write(s);

};

domcontentloaded ajax,Ajax优化(1) — DOMContentLoaded相关推荐

前端基于浏览器存储的AJAX性能优化
受后端开发redis启发,基于浏览器sessionStorage存储的ajax性能优化. 一.需求随着单页面和前后端分离的兴起,ajax已经成为大部分前后端数据交互的途径.虽然ajax是异步的,但是 ...
了解ajax，ajax的优化有哪些
-20-01-20 ------------------------------学习打卡-------------------------------------------------------- ...
AJAX工作原理及其优缺点 1.什么是AJAX? AJAX全称为“Asynchronous JavaScript and XML”（异步JavaScript和XML），是一种创建交互式网页应用的网页
参考文章:https://www.cnblogs.com/SanMaoSpace/archive/2013/06/15/3137180.html AJAX工作原理及其优缺点 1.什么是AJAX? AJ ...
sweet+alert+ajax,Ajax相关
Ajax Ajax的特性可以实现异步提交与局部刷新. Ajax是一门js的技术基于原生js开发的,但是用原生的js写代码过于繁琐, 我们在学的时候只学如何用jQuery实现ajax. AJAX 最 ...
html同时执行多个ajax,Ajax方法详解以及多个Ajax并发执行
AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML).javascript 先来一段代码html $.ajax({ type: &q ...
jQuery ajax - ajax()
jQuery ajax - ajax() 方法 jQuery Ajax 参考手册实例通过 AJAX 加载一段文本: jQuery 代码: $(document).ready(function(){ ...
jQuery Ajax - ajax()方法，参数注释
jQuery Ajax - ajax()方法,参数注释 ajax(参数注释,解答): $.ajax({// type,请求方式type: "get", // url,地址,就是ac ...
JavaScript之Ajax-1 Ajax(Ajax原理、Ajax对象属性和方法)
一.Ajax原理 Ajax简介 - Asynchronous JavaScript And Xml 异步的 JavaScript 和 Xml - Ajax 是一种用来改善用户体验的技术,其实质是,使用 ...
Ajax 什么是Ajax? Ajax的基本语法
Ajax 什么是Ajax? AJAX(Asynchronous Javascript And XML)翻译成中文就是"异步Javascript和XML".即使用Javascript ...
什么是Ajax?Ajax如何发送请求（详）
本篇来讲关于Ajax的内容,当然还有小伙伴可能不知道该怎么读 "Ajax",它读 "阿贾克斯" ,当然了读法可能因人而异,下面来进入正题,先来了解一下什么是Aj ...

domcontentloaded ajax,Ajax优化(1) — DOMContentLoaded

domcontentloaded ajax,Ajax优化(1) — DOMContentLoaded相关推荐

最新文章

热门文章