jQuery-用 jQuery 动态改写一个网页,最佳时机是在页面载入的哪个阶段?

jQuery-用 jQuery 动态改写一个网页,最佳时机是在页面载入的哪个阶段?

灵芸 发布于 2017-02-25 字数 214 浏览 1099 回复 3

我想用Jquery做第三方脚本改写一个网页,如果在load的时候改写,可能还未载入完成;如果在ready的时候改写,用户会等很久(好几秒),比较影响用户体验。有什么好的解决办法吗?另外,对动态内容的改写,有好的解决办法吗?

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(3

晚风撩人 2017-09-24 3 楼

在要改下的元素ready完成就可以改写,不用等页面ready。可以使用jquery 的 load():例如:

$('#id').load(function(){
//代码
})

你的这个问题涉及到页面的load事件和DOMContentLoaded事件:
window的load事件会在页面中的一切都加载完毕时触发,但这个过程可能会因为要加载外部资源过多而颇费周折。而DOMContentLoaded事件则在形成完成的DOM树之后就会触发,不理会图像、JavaScript文件、CSS文件或其他资源是否已经下载完毕。与load事件不同,DOMContentLoaded支持在页面下载的早期添加事件处理程序,这也就意味着用户能够尽早地与页面进行交互。
参考一下资料
http://www.w3cmm.com/javascript/domcontentloaded.html

甜柠檬 2017-08-22 2 楼

jQuery的load()或ready(),要根据具体应用而来。二者的差别:ready()发生在“网页本身的html”载入后就触发,load()则会等到“网页html标签中引用的图片、内嵌物件(如flash)、iframe”等所有的都载入后才会触发。

如果你页面里有多个load触发的话,只能用ready(),这是因为load()其实调用的是window.onload,而onload属性一次只能保存对一个函数的引用,所以不能在现有的行为基础上再增加新行为;ready()机制能够得到很好的处理。每次调用那个这个方法都会向内部的行为队列中添加一个新函数,当页面加载完成后,所有函数都将得到执行。而且,这些函数会按照注册它们的顺序依次执行。

而对于在ajax里我建议用load,这里它只请求后台服务器程序并没有外部引用那些图片、flash等文件。

虐人心 2017-05-14 1 楼

我建议还是等所有的DOM都加载完了再去改写,因为当所有的DOM都加载完了,这样改写比较安全一点,除非你确定要改写的DOM不会与其它DOM或者是其它JavaScript有关,如果考虑到用户体验,可以在前端加载一个稍微友好一点的提示让用户知道系统正在处理。

当然也可以在要改的DOM下方加上script代码,当需要改写的那段DOM元素加载完了就可以对其操作,但是个不建议那样做。