jquery lazyload延迟加载技术的实现原理分析
16lz
2021-01-22
前言
懒加载技术(简称lazyload)并不是新技术，它是js程序员对网页性能优化的一种方案。lazyload的核心是按需加载。在大型网站中都有lazyload的身影，例如谷歌的图片搜索页，迅雷首页，淘宝网，QQ空间等。因此掌握lazyload技术是个不错的选择，可惜jquery插件lazy load官网(http://www.appelsiini.net/projects/lazyload)称不支持新版浏览器。
lazyload在什么场合中应用比较合适?
涉及到图片，falsh资源，iframe，网页编辑器(类似FCK)等占用较大带宽，且这些模块暂且不在浏览器可视区内，因此可以使用lazyload在适当的时候加载该类资源。避免网页打开时加载过多资源，让用户等待太久。
如何实现lazyload?
lazyload的难点在如何在适当的时候加载用户需要的资源(这里用户需要的资源指该资源呈现在浏览器可视区域)。因此我们需要知道几点信息来确定目标是否已呈现在客户区,其中包括：
- 可视区域相对于浏览器顶端位置；
- 待加载资源相对于浏览器顶端位置。
在得到以上两点数据后，通过如下函数，便可得出某对象是否在浏览器可视区域了。
返回浏览器的可视区域位置
更多相关文章
- jQuery Ui Draggable在移动端浏览器不起作用解决方案
- 目前最好用的“点击复制”功能，兼容主流浏览器
- ie8下jQuery动画没有ie7流畅，是浏览器性能问题吗？有没有什么解决方
- CSS样式如何解决IE浏览器不同版本的兼容问题
- 关于INPUT的autocomplete="off" 属性（浏览器表单默认的记忆功能）
- html 加上readonly后在各种浏览器的差异。
- html中显示div的时候，超出浏览器的宽，怎么解决，在线等！！！
- 我无法在某些Web浏览器中输入我的注册文本字段
- （转）让所有浏览器支持HTML5 video视频标签