Lazyload是通过延迟加载来实现按需加载,达到节省资源,加快浏览速度的目的。
网上也有不少类似的效果,这个Lazyload主要特点是:
支持使用window(窗口)或元素作为容器对象;
对静态(位置大小不变)元素做了大量的优化;
支持垂直、水平或同时两个方向的延迟。
程序说明
【基本原理】
首先要有一个容器对象,容器里面是_elems加载元素集合。
用隐藏或替换等方法,停止元素加载内容。
然后历遍集合元素,当元素在加载范围内,再进行加载。
加载范围一般是容器的视框范围,即浏览者的视觉范围内。
当容器滚动或大小改变时,再重新历遍元素判断。
如此重复,直到所有元素都加载后就完成。
【容器对象】
程序一开始先用_initContainer程序初始化容器对象。
先判断是用window(窗口)还是一般元素作为容器对象:
var doc = document,
isWindow = container == window || container == doc
|| !container.tagName || (/^(?:body|html)$/i).test( container.tagName );
如果是window,再根据文档渲染模式选择对应的文档对象:
if ( isWindow ) {
container = doc.compatMode == 'CSS1Compat' ? doc.documentElement : doc.body;
}
定义好执行方法后,再绑定scroll和resize事件:
this._binder = isWindow ? window : container;
$$E.addEvent( this._binder, "scroll", this.delayLoad );
isWindow && $$E.addEvent( this._binder, "resize", this.delayResize );
如果是window作为容器,需要绑定到window对象上,为了方便移除用了_binder属性来保存绑定对象。
http://www.cnblogs.com/cloudgamer/archive/2010/02/01/LazyLoad.html
分享到:
相关推荐
"Lazyload 延迟加载效果"是一种优化网页性能的技术,它主要应用于图像和其他大体积资源的加载。在网页设计中,当用户滚动页面时,只加载可视区域内的内容,而将非可视区域的内容推迟到需要时再加载,这就是延迟加载...
Lazyload是通过延迟加载来实现按需加载,达到节省资源,加快浏览速度的目的。...由于内容比较多,下一篇再介绍图片延迟加载效果。 兼容:ie6/7/8, firefox 3.5.5, opera 10.10, safari 4.0.4, chrome 3.0
首先,`LazyLoad.htm`是示例页面,它包含了一些延迟加载图片的HTML结构。这些图片通常会设置一个占位符,如一个小尺寸的灰色方块,并且`src`属性会被一个特殊的占位符URL(如"data-src")替代。例如: ```html 延迟...
标题"懒加载LazyLoad延时加载图片效果特效.rar"表明这是一个关于使用懒加载技术实现图片延迟加载,并带有特效的实例。.rar文件通常包含压缩的资源,如HTML文件(LazyLoad.htm)和JavaScript文件(CJL.0.1.min.js),...
然后引入 jQuery.lazyload 插件,如 `jquery.lazyload.min.js` 文件,提供延迟加载的功能。 2. **HTML 结构**:在 HTML 中,为需要延迟加载的图片添加特定的类名(通常是 `.lazyload`),同时设置 `data-src` 属性...
jQuery LazyLoad 实现了图片的延时加载(也称为懒加载),即只有当图片进入用户可视区域时,才会开始加载,这样可以显著减少页面初次加载时的流量,并提高页面加载速度。 **一、jQuery LazyLoad 基本原理** 1. **...
这个实例演示了如何将该插件集成到项目中,并通过实际的图片资源展示预加载效果。你可以下载并运行这个示例,观察预加载图片在滚动过程中的动态加载过程,更好地理解其工作原理和使用方法。 总之,jQuery LazyLoad...
标题"Lazyload图片延迟加载效果.rar"指的是这个压缩包包含了一个关于实现懒加载效果的实例。这个实例可能包括了HTML、CSS以及JavaScript代码,用于演示如何在网页中应用懒加载。 描述"Lazyload图片延迟加载效果...
总结起来,"Lazyload图片延迟加载效果"是一个关键的前端性能优化技术,通过JavaScript的`Intersection Observer` API或滚动事件来实现,可以有效减少页面初始化时的加载时间,提高网页的响应速度和用户满意度。...
本文将围绕"lazyload异步加载图片"这一主题,深入探讨其原理、实现方式以及实际应用中的注意事项。 ### 1. 基本原理 懒加载的核心思想是延迟加载,即不一次性加载所有图片,而是当图片进入用户的可视区域时才进行...
《延迟加载(LazyLoad):优化网页性能的关键技术》 在当今互联网时代,大型网站面临着一个挑战:如何在满足用户体验的同时,尽可能减少服务器资源的消耗。延迟加载(LazyLoad),也称为按需加载,就是为解决这一...
为了解决这一问题,jQuery 提供了一个插件——jQuery Lazyload,它允许我们实现图片的延迟加载(也称为懒加载),即图片只在用户滚动到可视区域时才开始加载。这种方式可以显著提升网页的加载速度,特别是对于拥有...
`jquery.lazyload.js` 是基于 jQuery 的懒加载插件,而 `jquery-1.11.0.min.js` 是 jQuery 的一个小巧且经过压缩的版本,用于支持 `jquery.lazyload.js` 的运行。`tuupola-jquery_lazyload` 这个压缩包可能包含了这...
网页内容延迟加载(LazyLoad)是一种优化网页性能的技术,它主要应用于图片、视频或大量文本内容的加载。这种技术的核心思想是,只加载用户当前视口内的内容,当用户滚动页面,即将进入视口的内容才会被加载。这样...
在提供的压缩包文件“图片交换”中,可能包含用于演示延迟加载效果的图片资源。当你在Chrome浏览器的网络面板(开发者工具中)中查看加载情况时,可以看到只有当图片进入视口时,网络请求才会被触发,这正是`lazy...
jQuery LazyLoad 允许我们进行一些自定义配置,例如设置阈值(决定图片距离视口多远时开始加载)、更改默认的加载效果等。例如,我们可以设置图片距离视口50像素时开始加载: ```javascript $(".lazyload").lazy...
**jQuery LazyLoad 插件详解:实现图片延迟加载** 在网页设计中,为了提升用户体验,减少页面初次加载的时间,一种常见的优化策略是采用图片延迟加载(Image Lazy Load)技术。`jQuery LazyLoad` 是一个非常实用的 ...
在这个"懒加载案例-lazyload"中,我们可以深入探讨以下几个关键知识点: 1. **懒加载原理**: - **可见性检测**:懒加载的核心在于判断元素是否在用户的视口范围内。这通常通过计算元素距离浏览器窗口的距离和用户...
云游戏玩家(cloudgamer)编写的这个LazyLoad插件,旨在实现这一功能,提供了一种简单而灵活的方法来实现图片延迟加载效果。这个插件的核心原理是监听滚动事件,当图片进入可视区域时,动态地请求图片资源并将其插入...
**延迟加载(LazyLoad)技术概述** 延迟加载是一种优化网页性能的策略,它允许我们只在需要时才加载资源,如图片、JavaScript或CSS。这种技术显著减少了初始页面加载时间,提高了用户体验,尤其是在移动设备上,...