标签:load

ajax load content .ready

发表于2年前(Jul 12, 2016 11:07:51 AM)  阅读 903  评论 0

分类: WEB前端 JS

标签: load .ready

ajax load方法是常用的加载页面的方法,特别是对于SPA单页面应用来说,几乎每个应用都是通过ajax load进行展示的。document.ready方法也是经常使用的方法,document.ready方法将会在document的dom元素加载完成的时候执行。ajax load和document.ready两者结合在一起会发生什么事呢。

假设有A,B两个页面,A页面ajax load B页面,B页面想在页面内容加载完,即document.ready事件里面执行一段方法,能正常执行成功吗。

这时候,结果取决于B页面的元素内容,B页面是一个新的document,还是原来的document。如果是一个新的document,即页面内容包含html节点,document.ready会正常执行,因为这个document是当前新的document。如果当前页面没有包含html节点,document.ready方法会立马执行,因为这个document是旧的document,而旧的document早已ready,所以这时候可能就不是你期望的执行顺序了。

......

jquery load页面导致js重复加载

发表于2年前(May 11, 2016 1:03:36 PM)  阅读 2550  评论 0

分类: WEB前端 JS

标签: 缓存 jquery load js重复加载 事件重复监听 事件监听多次 ajaxSetup cache

1、问题发生场景:

主页包含两个div,div1,div2,div1采用jquery load了page1,div2采用jquery load了page2,page1与page2业务类似,共用一个js,主页可能同时显示page1和page2,这时发现js重复加载了。

2、问题分析:

打开chrome,查看network,在load page1时js后面自动加上了?_1462934775039参数,数字应该是时间戳,紧接着load page2时,js又load了一次,同样带了一个时间戳,和之前时间戳不一样。

首先,js后面带了时间参数是避免使用缓存,看来jquery load方法是默认给js不缓存。其次不管js是否是缓存,加载两次,里面的内容都会执行两次,如果是同名方法定义,后面的方法会覆盖前面的方法,如果是事件监听,则会出现添加多次的情况,这样就会有问题,其实发现这个问题就是因为笔者js里面的事件监听执行了多次,导致页面表现异常。例如如下代码就会导致执行两次:

......