JavaScript实现页面滚动图片加载(仿lazyload效果)


Posted in Javascript onJuly 22, 2011

为什么写这篇文章?

1.优化页面很实用的方法,技术实现不难;

2.搜索了相关内容的文章,好像都是用jQuery的方法,可是如果不用jQuery的站长难道就不能用这种方法了么;

3.做技术分享也是在让更多人帮自己测试,因为这个本人木有在项目中实际用到,都是自己琢磨的,所有如果有问题请大家指出,先谢谢了;

4.这个月的博客还没写;

5.刚好木有工作任务,此时不写更待何时...

现在的页面大多都具有的特点 - 内容丰富,图片较多;像我们经常浏览的淘宝,京东,团购网站之类的(本人网购控,属于一个月不在网上花点钱就不痛快),一个页面几十张图片那叫毛毛雨,所以现在流行起了一个方法 - 滚动动态加载。这个方法能解决很大程度的HTTP请求,首先页面只加载窗口显示区的图片,只有等到页面滚动,且滚动到相应位置的时候再去加载图片,这样做网页加载快了(请求少了,加载的东西少了能不提快么)。在《高性能网站建设指南》第一章就说到,减少HTTP请求的重要性,这是提高网页前端性能,优化页面加载速度很实用的做法。

原理:
1.给页面绑定滚动事件;
2.加载页面的时候把真正的图片地址放在某属性中;
3.然后再滚动过程中判断元素是否进入当前浏览器窗口内;
4.最后加载图片,当然加载什么,用什哪种用户体验都得由你决定;

难点:

浏览器兼容是造成难点的原因所在,DOM标准和IE标准,每天前端的工作都在和它们打交道。思考下面的几段代码

1.window.pageYOffset ? window.pageYOffset : window.document.documentElement.scrollTop
目的:获得当前页面相对于窗口显示区左上角的 Y 位置.
DOM标准:window.pageYOffset;
IE标准:window.document.documentElement.scrollTop

2.window.innerHeight ? window.innerHeight : document.documentElement.clientHeight
目的:声明了窗口的文档显示区的高度和宽度,以像素计.
DOM标准:innerheight 和 innerwidth;
IE标准:document.documentElement 或 ducument.body (与 DTD 相关)的 clientWidth 和 clientHeight 属性作为替代

3.obj.getBoundingClientRect().top + window.document.documentElement.scrollTop + window.document.body.scrollTop
目的:获取页面元素的位置.
当浏览器为 非webkit内核 时,document.body.scrollTop值恒定为0,使用 document.documentElement.scrollTop才能取到正确值 ;
当浏览器为 webkit内核 时,document.documentElement.scrollTop值恒定为0,使用 document.body;
我还搜索到一种说法是和DTD相关(即 当页面指定了 DOCTYPE时,使用 document.documentElement ; 当页面没有指定了 DOCTYPE时,使用 document.body),请确定知道的朋友帮忙指出下,不胜感谢。

细节:
1.因为真正的地址最初是在某属性中(默认是xsrc,可自己设置),所以默认的图片地址最好是一个像素的透明图片,这样可以避免在浏览器中出现红X;
JavaScript实现页面滚动图片加载(仿lazyload效果)
2.在图片load的时候可以加入等待的图片,这样用户才会知道这里有图片需要加载,良好的用户体验是前端一直所追求的(例子中有体现);
3.在图片load成功后可以加入合适的显示效果(例子中木有体现,可以自己尝试);
JavaScript源码如下:

var scrollLoad = (function (options) { 
var defaults = (arguments.length == 0) ? { src: 'xSrc', time: 300} : { src: options.src || 'xSrc', time: options.time ||300}; 
var camelize = function (s) { 
return s.replace(/-(\w)/g, function (strMatch, p1) { 
return p1.toUpperCase(); 
}); 
}; 
this.getStyle = function (element, property) { 
if (arguments.length != 2) return false; 
var value = element.style[camelize(property)]; 
if (!value) { 
if (document.defaultView && document.defaultView.getComputedStyle) { 
var css = document.defaultView.getComputedStyle(element, null); 
value = css ? css.getPropertyValue(property) : null; 
} else if (element.currentStyle) { 
value = element.currentStyle[camelize(property)]; 
} 
} 
return value == 'auto' ? '' : value; 
}; 
var _init = function () { 
var offsetPage = window.pageYOffset ? window.pageYOffset : window.document.documentElement.scrollTop, 
offsetWindow = offsetPage + Number(window.innerHeight ? window.innerHeight : document.documentElement.clientHeight), 
docImg = document.images, 
_len = docImg.length; 
if (!_len) return false; 
for (var i = 0; i < _len; i++) { 
var attrSrc = docImg[i].getAttribute(defaults.src), 
o = docImg[i], tag = o.nodeName.toLowerCase(); 
if (o) { 
postPage = o.getBoundingClientRect().top + window.document.documentElement.scrollTop + window.document.body.scrollTop; postWindow = postPage + Number(this.getStyle(o, 'height').replace('px', '')); 
if ((postPage > offsetPage && postPage < offsetWindow) || (postWindow > offsetPage && postWindow < offsetWindow)) { 
if (tag === "img" && attrSrc !== null) { 
o.setAttribute("src", attrSrc); 
} 
o = null; 
} 
} 
}; 
window.onscroll = function () { 
setTimeout(function () { 
_init(); 
}, defaults.time); 
} 
}; 
return _init(); 
}); 
scrollLoad();
 
可传递一个参数设置src原地址和响应时间
scrollLoad({ 
src:'userSrc', //字符串型 
time: 100 //数字型 
})
 
demo下载
Javascript 相关文章推荐
jquery 获取json数据实现代码
Apr 27 Javascript
JQuery select控件的相关操作实现代码
Sep 14 Javascript
图片轮换效果实现代码(点击按钮停止执行)
Apr 12 Javascript
浅谈Javascript变量作用域问题
Dec 16 Javascript
浅谈JavaScript 执行环境、作用域及垃圾回收
May 31 Javascript
Angular 页面跳转时传参问题
Aug 01 Javascript
浅析JavaScript中作用域和作用域链
Dec 06 Javascript
jquery实现简单的瀑布流布局
Dec 11 Javascript
jQuery插件HighCharts实现的2D对数饼图效果示例【附demo源码下载】
Mar 09 Javascript
vue单页面打包文件大?首次加载慢?nginx带你飞,从7.5M到1.3M蜕变过程(推荐)
Jan 16 Javascript
详解给Vue2路由导航钩子和axios拦截器做个封装
Apr 10 Javascript
opencv 识别微信登录验证滑动块位置
Aug 07 Javascript
JS 自定义带默认值的函数
Jul 21 #Javascript
表单切换,用回车键替换Tab健(不支持IE)
Jul 20 #Javascript
在浏览器中获取当前执行的脚本文件名的代码
Jul 19 #Javascript
iframe 异步加载技术及性能分析
Jul 19 #Javascript
15款优秀的jQuery导航菜单插件分享
Jul 19 #Javascript
jQuery .tmpl(), .template()学习资料小结
Jul 18 #Javascript
JS仿flash上传头像效果实现代码
Jul 18 #Javascript
You might like
PHP XML error parsing SOAP payload on line 1
2010/06/17 PHP
分享一个超好用的php header下载函数
2014/01/31 PHP
php微信开发之关注事件
2018/06/14 PHP
ThinkPHP框架整合微信支付之Native 扫码支付模式二图文详解
2019/04/09 PHP
laravel Model 执行事务的实现
2019/10/10 PHP
Jquery 快速构建可拖曳的购物车DragDrop
2009/11/30 Javascript
jMessageBox 基于jQuery的窗口插件
2009/12/09 Javascript
Extjs Ext.MessageBox.confirm 确认对话框详解
2010/04/02 Javascript
flexigrid 类似ext grid的JS表格代码
2010/07/17 Javascript
JavaScript下利用fso判断文件是否存在的代码
2010/12/11 Javascript
jQuery插件-jRating评分插件源码分析及使用方法
2012/12/28 Javascript
在表单提交前进行验证的几种方式整理
2013/07/31 Javascript
购物车选中得到价格实现示例
2014/01/26 Javascript
基于jquery的手风琴图片展示效果实现方法
2014/12/16 Javascript
JavaScript结合AJAX_stream实现流式显示
2015/01/08 Javascript
基于jQuery创建鼠标悬停效果的方法
2015/03/07 Javascript
js控制按钮,防止频繁点击响应的实例
2017/02/15 Javascript
VueJs单页应用实现微信网页授权及微信分享功能示例
2017/07/26 Javascript
JavaScript数据结构与算法之队列原理与用法实例详解
2017/11/22 Javascript
微信小程序实现页面跳转传值以及获取值的方法分析
2017/12/18 Javascript
详解使用Nuxt.js快速搭建服务端渲染(SSR)应用
2019/03/13 Javascript
vue router 跳转时打开新页面的示例方法
2019/07/28 Javascript
Node.js学习教程之Module模块
2019/09/03 Javascript
解决vue prop传值default属性如何使用,为何不生效的问题
2020/09/21 Javascript
Python中exit、return、sys.exit()等使用实例和区别
2015/05/28 Python
Python脚本文件打包成可执行文件的方法
2015/06/02 Python
Python每天必学之bytes字节
2016/01/28 Python
Python continue继续循环用法总结
2018/06/10 Python
python3.6.5基于kerberos认证的hive和hdfs连接调用方式
2020/06/06 Python
创造美妙香氛体验:Aera扩散器和香水
2018/11/25 全球购物
Otticanet意大利:最顶尖的世界名牌眼镜, 能得到打折季的价格
2019/03/10 全球购物
秋季运动会广播稿大全
2014/02/17 职场文书
中学生纪念九一八事变演讲稿
2014/09/14 职场文书
MySQL中in和exists区别详解
2021/06/03 MySQL
python编程实现清理微信重复缓存文件
2021/11/01 Python
你需要掌握的20个Python常用技巧
2022/02/28 Python