JavaScript实现 页面滚动图片加载
原理:
1.给页面绑定滚动事件;
2.加载页面的时候把真正的图片地址放在某属性中;
3.然后再滚动过程中判断元素是否进入当前浏览器窗口内;
4.最后加载图片,当然加载什么,用什哪种用户体验都得由你决定;
难点:
浏览器兼容是造成难点的原因所在,DOM标准和IE标准,每天前端的工作都在和它们打交道。思考下面的几段代码
目的:获得当前页面相对于窗口显示区左上角的 Y 位置.
DOM标准:window.pageYOffset;
IE标准:window.document.documentElement.scrollTop
目的:声明了窗口的文档显示区的高度和宽度,以像素计.
DOM标准:innerheight 和 innerwidth;
IE标准:document.documentElement 或 ducument.body (与 DTD 相关)的 clientWidth 和 clientHeight 属性作为替代
目的:获取页面元素的位置.
当浏览器为 非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;
2.在图片load的时候可以加入等待的图片,这样用户才会知道这里有图片需要加载,良好的用户体验是前端一直所追求的(例子中有体现);
3.在图片load成功后可以加入合适的显示效果(例子中木有体现,可以自己尝试);
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
JavaScript源码如下:
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();
demo下载
可传递一个参数设置src原地址和响应时间
time: 100 //数字型
})
JavaScript实现 页面滚动图片加载相关推荐
- html 图片显示一块一块加载失败,页面中图片加载失败的优化方法
网站当中经常会遇到图片加载失败的问题,img中有地址,但是地址打开是错误的.情况如下: 不同浏览器处理错误图片是不一样的,有的干脆就显示差号,例如IE,有的显示一张破碎的图片,有的则是给一张高度比较大 ...
- jQuery页面滚动 动态加载图片等元素
相信大家见过好多随着页面滚动,动态加载图片等元素的网站,我也是,以前见了好多,只是没时间去研究,今天晚上有空,百度了一下找了一个jquery插件,作者张鑫旭,效果挺好,代码也很简单,使用更方便,废话不 ...
- 在windows、linux中开启nginx的Gzip压缩大大提高页面、图片加载速度转
为了降低tomcat服务的压力,把页面上的图片采用windows版的nginx进行加载,由于有些图片比较大,加载特别的慢,所以在nginx中打开了gzip的压缩功能.加载图片的速度快了很多. 通过站长 ...
- javascript实现页面的重新加载和页面的刷新
1.reload 方法,该方法强迫浏览器刷新当前页面. 语法:location.reload([bForceGet]) 参数: bForceGet, 可选参数, 默认为 false,从客户端缓存里 ...
- 页面滚动动态加载数据,页面下拉自动加载内容
$(window).scroll(function () {var scrollTop = $(this).scrollTop();var scrollHeight = $(document).hei ...
- jQuery页面滚动图片等元素动态加载实现
一.关于滚动显屏加载 常常会有这样子的页面,内容很丰富,页面很长,图片较多.比如说光棍节很疯狂的淘宝商城页面. 或者是前段时间写血本买了个高档耳机的京东商城页面,或者是新浪微博之类. 这些页面图片数量 ...
- jquery 当页面图片加载之后_图片的懒加载和预加载
一.懒加载 [1.1]什么是懒加载? 懒加载也就是延迟加载,指的是在长网页中延迟加载图像,是一种很好优化网页性能的方式.当访问一个页面的时候,先把img元素或是其他元素的背景图片路径替换成一张大小为1 ...
- 服务器图片加载慢_页面提高性能利器_懒加载
哈喽,艾瑞巴蒂,现在搜狗商城产品需求已经趋于稳定,已经开始逐步的着手进行页面的性能提升工作.这不最近小编正在进行"页面懒加载需求"的功能测试.小编第一次听说这个名词,让我们一起了解 ...
- 大图片加载、懒加载实现原理(滚动加载图片)
大图片加载从模糊到清晰: https://www.cnblogs.com/wangmeijian/p/6822674.html?utm_source=tuicool&utm_medium=re ...
最新文章
- 76. 最小覆盖子串(滑动窗口)
- Linux buffer/cache异同
- invalidate(true) 图形不显示_2D图像界面-ATI 图形界面卡
- WE CAN:全球智能路由网络 | 体验共享技术专题
- 使用Docker-数据卷挂载案例2
- 百度Android定位API使用指南
- 1999元的AirPods Pro无线耳机突然发布,史上最大升级,买不买?
- 百度语音识别技术突破 巨头崛起
- js中字符串正则表达式、正则法则pattern、RegExp、flags、exec
- java 下划线_Java SE 9:“ _”(下划线)更改
- 优秀雇员必备六大关键技能(2)
- 关于tp框架token
- 3DSMAX制作超时空未来动画场景-3D建模场景模型教程
- PowerPoint 中缺少think-cell 加载项怎么解决?
- drain open 线与_开漏(opendrain)和开集(opencollector)介绍
- acwing 2041.干草堆
- python魔方程序算法_python魔方程序算法_python算法(一)
- nodemon启动报错
- PyTorch 错误 RuntimeError: invalid argument 5: k not in range for dimension at /pytorch/aten/src/THC/g
- 21、conda下载,安装,卸载
热门文章
- DotNetNuke4.x安装心得(按照下面那篇《最完整的DNN 4.X 安装攻略(适合3.X版本)》安装还是失败的朋友进来看看...
- 邮箱回执怎么看_考研复试联系导师邮件怎么写?
- MATLAB学习笔记(九)
- tum数据集_数值预报尚能战否?来自数据驱动的挑战
- ruby on rails连接mysql_ruby on rails 连接mysql数据库
- Python机器学习:多项式回归与模型泛化007偏差方差平衡
- 6park留园 android,App Store 上的“掌上留园-6park”
- 制造业数字化转型的困难_智能制造如何助力企业转型升级?百家制造业企业共谋数字化转型路...
- android开发所遇问题集(一)----Mr.Zhang
- OC 获取view相对位置_【全职业P4阶段世界BUFFS和药剂】BUFFS获取方法药剂自己查询出处...