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 相关文章推荐
强悍无比的WEB开发好助手FireBug(Firefox Plugin)
Jan 16 Javascript
JavaScript实现统计文本框Textarea字数增强用户体验
Dec 21 Javascript
javascript与cookie 的问题详解
Nov 11 Javascript
调用HttpHanlder的几种返回方式小结
Dec 20 Javascript
AngularJS  $on、$emit和$broadcast的使用
Sep 05 Javascript
js 判断附件后缀的简单实现方法
Oct 11 Javascript
原生js仿浏览器滚动条效果
Mar 02 Javascript
jQuery插件jqGrid动态获取列和列字段的方法
Mar 03 Javascript
详解vue2.0 资源文件assets和static的区别
Nov 27 Javascript
详解vue 路由跳转四种方式 (带参数)
Apr 28 Javascript
JS学习笔记之数组去重实现方法小结
May 29 Javascript
JavaScript获取时区实现过程解析
Sep 24 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出错界面
2006/10/09 PHP
将CMYK颜色值和RGB颜色相互转换的PHP代码
2014/07/28 PHP
程序员的表白神器“520”大声喊出来
2016/05/20 PHP
php处理静态页面:页面设置缓存时间实例
2017/06/22 PHP
javascript 控制弹出窗口
2007/04/10 Javascript
Firefox中beforeunload事件的实现缺陷浅析
2012/05/03 Javascript
Extjs grid panel自带滚动条失效的解决方法
2014/09/11 Javascript
非jQuery实现照片散落桌子上,单击放大的LightBox效果
2014/11/28 Javascript
Windows环境下npm install 报错: operation not permitted, rename的解决方法
2016/09/26 Javascript
JS遍历对象属性的方法示例
2017/01/10 Javascript
令按钮悬浮在(手机)页面底部的实现方法
2017/05/02 Javascript
node.js爬取中关村的在线电瓶车信息
2018/11/13 Javascript
微信小程序实现动态显示和隐藏某个控件功能示例
2018/12/14 Javascript
vue项目部署到nginx/tomcat服务器的实现
2019/08/26 Javascript
Vue 根据条件判断van-tab的显示方式
2020/08/03 Javascript
antd vue 刷新保留当前页面路由,保留选中菜单,保留menu选中操作
2020/08/06 Javascript
vue中h5端打开app(判断是安卓还是苹果)
2021/02/26 Vue.js
Python ljust rjust center输出
2008/09/06 Python
使用Python生成XML的方法实例
2017/03/21 Python
Python寻找路径和查找文件路径的示例
2019/07/10 Python
Python使用Tkinter实现滚动抽奖器效果
2020/01/06 Python
TensorFlow实现指数衰减学习率的方法
2020/02/05 Python
Django import export实现数据库导入导出方式
2020/04/03 Python
Python中无限循环需要什么条件
2020/05/27 Python
StudentUniverse英国:学生航班、酒店和旅游
2019/08/25 全球购物
植村秀加拿大官网:Shu Uemura加拿大
2019/09/03 全球购物
创建卫生先进单位实施方案
2014/03/10 职场文书
党委书记个人对照检查材料
2014/09/15 职场文书
2014年社区党建工作总结
2014/11/11 职场文书
2016春节慰问信范文
2015/03/25 职场文书
2015年艾滋病宣传活动总结
2015/03/27 职场文书
2015年幼儿园保育员工作总结
2015/04/23 职场文书
十二生肖观后感
2015/06/12 职场文书
小学同学聚会感言
2015/07/30 职场文书
python 闭包函数详细介绍
2022/04/19 Python
JavaScript前端面试扁平数据转tree与tree数据扁平化
2022/06/14 Javascript