如果你的项目中同时使用了ajax和orm工具,那你就应该注意这篇文章,或许你也碰到过这个问题。
乍一看标题,或许很多人都很迷糊,ajax和orm的lazyload有什么关系,那里来的冲突?是啊,乍一看,一个是前端,一个是后端,基本没有关系的,怎么就有了冲突。如果你使用了remote call调用服务器端方法,并且得到返回的po的时候,就很有可能出现这种问题。
先看看lazyload的含义,lazyload是为了防止n+1问题同时节省资源的一种做法,比如,我有一张用户表(user),一张订单表(order),一张货物表(item), user和order是1:N的关系,order和item假设1:1的关系。当我们使用orm工具的时候,一般可能会这么定义, user对象中存在一个由order对象组成的Set或List,而order和item之间还各存在一个Item和Orer对象。正常情况下,取得一个user对象的时候,如果不需要相关的order信息,只要不去显示访问order列表的get方法,orm工具是不会去加载和当前user对象关联的order列表的。当我们要这些order信息的时候,仅仅访问其get(Java) 方法或者其属性(.Net),orm工具会自动的帮我们加载这些对象。
但是不幸的是,如果你通过ajax的remotecall来得到一个User对象,那么你的lazyload就会失控了。我们知道现在的 ajax框架都是支持remotecall的(据我所知),它的一个好处就是客户端js可以直接访问服务器端方法,并且ajax框架能够以一种协议将服务器端返回的po对象转换成js对象。那么在回到刚才所提到的User对象,当通过remotecall得到一个User对象的时候,ajax框架会遍历User对象的get方法或者属性同时生成一个纯js的object,,在遍历的过程中,它会把加载该user的ordet列表,order关联Item,Item也被加载了。Lazyload就会在你意向不到的情况下失效了。
如果你对象中存在树的结构,那么这里就会无限制的一直加载下去,直到把整棵树全部加载完毕,而且可能你还根本不知道会有这个问题。正是今天碰到这个奇怪并隐讳的问题,花费了我几个小时的时间,才真正的找出根本原因。
建议大家在使用ajax的同时尽量少使用这种方式,尽量使用更新局部页面的办法,而不是通过remotecall获得po,动态生成dom。有一个解决的办法就是,把需要lazyload的属性以及访问方法都设置成private,另外通过其他方法来调用。这样就能避免转换对象的时候导致你的lazyload失效。
分享到:
- 2006-09-26 00:27
- 浏览 12448
- 评论(28)
- 论坛回复 / 浏览 (28 / 20036)
- 查看更多
相关推荐
在当今网页开发中,为了提高页面加载速度和用户体验,"懒加载"(Lazy Load)技术变得越来越重要。jQuery LazyLoad插件是一个广泛使用的解决方案,它允许图片、iframe等元素在进入浏览器视口时才开始加载,从而显著...
jQuery_lazyload设计得相当灵活,可以与大部分其他jQuery插件和前端框架(如Bootstrap)良好协作。 7. **优化技巧**: - 结合CSS媒体查询,针对不同设备和屏幕尺寸设置不同的延迟加载策略。 - 使用WebP或SVG等...
**jQuery Lazyload 图片加载技术详解** 在网页设计中,图片是重要的元素之一,但大量图片的预加载可能会拖慢页面的加载速度,影响用户体验。为了解决这一问题,jQuery 提供了一个插件——jQuery Lazyload,它允许...
5. **易于集成和定制**:作为基于jQuery的插件,jQuery.Lazyload.js拥有丰富的API和配置选项,开发者可以根据需求进行定制,实现不同的加载效果,如预加载、动画效果等。 在实际应用中,jQuery.Lazyload.js的使用...
标签“lazyload”和“延迟加载”进一步确认了这个压缩包内容的核心是关于延迟加载技术的实践。在网页开发中,延迟加载是一种节省带宽、提高页面响应速度的重要手段,尤其对于移动设备来说,可以有效减少数据消耗。 ...
2. **异步加载**:如果页面中同时使用了其他异步加载资源(如AJAX),确保正确配置插件以避免冲突。 3. **初始化**:在文档加载完成后,需要调用`.lazyload()`方法来启动插件。如果你的图片是在动态插入的,可能...
2. **JavaScript配置**:引入`lazyload.js`和`jquery.js`,确保jQuery库已经加载。然后,通过调用`lazyload`函数来初始化插件: ```javascript $(function() { $("img.lazyload").lazyload(); }); ``` 这行...
4. **自定义事件和扩展**:jQuery.lazyload 允许开发者自定义加载事件和扩展功能,如在图片加载完成后执行某些操作,或者与其他库和框架集成。 5. **优化提示**:为了确保所有浏览器都能正确工作,建议为低版本...
1. **引入 jQuery 和 LazyLoad**:首先确保页面中已经引入了 jQuery 库,然后引入 LazyLoad 的 JavaScript 文件,如 `jquery.lazyload.js`。 2. **设置 HTML 结构**:给需要延时加载的图片添加特定的类名(如 `lazy...
`tuupola-jquery_lazyload` 这个压缩包可能包含了这两个库的源代码以及相关的示例(demo),帮助开发者理解和使用这个插件。 要使用 `jquery.lazyload.js`,首先确保在页面中引入了 jQuery 和插件本身。通常,我们...
它的主要功能是实现图片的延迟加载(Lazy Load),以此提升网站的加载速度和用户体验。在网页浏览时,传统方式下所有图片会一次性全部加载,这可能导致页面加载时间过长,特别是对于拥有大量图片的电商网站来说,这...
**jQuery LazyLoad 图片懒加载实例** 在网页设计中,图片加载是影响页面性能的关键因素。当页面包含大量图片时,一次性加载所有图片可能会导致页面加载速度变慢,用户体验下降。为了解决这一问题,我们可以使用`...
1. **更新JQuery和JQuery.LazyLoad**:确保使用的是最新稳定版本,以获得更好的浏览器兼容性和修复已知问题。 2. **调试和检查代码**:使用浏览器的开发者工具检查JavaScript错误,定位可能导致问题的代码段。 3. **...
Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预加载的处理方式正好是相反的. 在包含很多...
Lazyload是通过延迟加载来实现按需加载,达到节省资源,加快浏览速度的目的。 网上也有不少类似的效果,这个Lazyload主要特点是: 支持使用window(窗口)或元素作为容器对象; 对静态(位置大小不变)元素做了大量...
`lazyload.js`还提供了`load`和`error`事件,可以监听图片加载成功和失败: ```javascript lazyLoadInstance.on('load', function(event) { console.log('Image loaded:', event.target); }); lazyLoadInstance....
总之,`lazyload.js`是一个实用的图片延迟加载解决方案,通过简单地配置和使用,可以有效地提升网页性能,减少用户等待时间,同时还能降低服务器带宽消耗。在实际开发中,结合最佳实践和合理的配置,可以最大化地...
在网页开发中,图片懒加载(Lazy Load)是一种优化用户体验和提高页面加载速度的技术。"lazyload"是指在JavaScript中实现的延迟加载策略,它只在用户滚动到视口附近的图片时才加载图片,而不是在页面初次渲染时一次...