图片滚动按需加载:在某个区域的图片(自定义的范围,一般是首屏以下的区域),拉动滚动,图片出现在可视范围才开始加载,目的是减少请求,减耗宽带,提高首屏的呈现速度,让用户第一时间看到网页内容,留下美好的第一印象。

讲解:

(一)需要按需加载的img标签,图片的真实地址保存到自定义的属性里,如'data-src',那么src属性用一张1像素透明的图片

(二)把某范围内的img标签元素保存到数组里面

(三)定义一个方法:遍历数组元素,然后判断某元素的offsetTop是否在滚动的可视范围,如果在,交换图片的属性('data-src','src'),然后删除这个元素,那么在下次遍历就不存在

load:function(){
// 全部加装,解除事件
if(this.imgList.length == 0){
this.removeHandler(window,'scroll',this.fnLoad);
this.removeHandler(window,'resize',this.fnLoad);
return
}
var st = document.body.scrollTop || document.documentElement.scrollTop,
clientH = document.documentElement.clientHeight,
scrollArea = st + clientH;
for(var n=0;n<this.imgList.length;n++){
var offsetTop = this.imgList[n].getBoundingClientRect().top+st,
imgH = this.imgList[n].clientHeight;
if( scrollArea>(offsetTop-200)&&(imgH+offsetTop)>st ){
var _src = this.imgList[n].getAttribute(this.holderSrc);
this.imgList[n].setAttribute('src',_src);
this.imgList.splice(n,1);//删除已经加载完的元素
n--;
}
} }

(四)给window对象,scroll与resize 添加此事件

(五)用户有可能快速拉滚动条,这样会导致事件的频繁触发,所以需要添加个setTimeout

bind:function(obj,fn){
var _this = this;
return function(){
if(_this.timer) clearTimeout(_this.timer);
_this.timer = setTimeout(function(){
fn.apply(obj,arguments);
},300); }
}

完整代码:

function LazyScroll(opt){
this.init(opt);
}
LazyScroll.prototype = {
init:function(opt){
this.setOptions(opt);
this.load();
this.fnLoad = this.bind(this,this.load);
this.addHandler(window,'scroll',this.fnLoad);
this.addHandler(window,'resize',this.fnLoad);
},
setOptions:function(opt){
this.holderSrc = opt.holderSrc || 'data-src';
this.wrapId = opt.wrapId;
this.imgList = [];
this.timer = null;
var targets = null;
if (document.querySelectorAll) {
targets = document.querySelectorAll("#" + this.wrapId + " img")
} else {
targets = document.getElementById(this.wrapId).getElementsByTagName("img")
}
var n = 0,
len = targets.length;
// 把元素存到数组里
for(;n<len;n++){
if(targets[n].getAttribute(this.holderSrc)){
this.imgList.push(targets[n]);
}
}
},
load:function(){
// 全部加装,解除事件
if(this.imgList.length == 0){
this.removeHandler(window,'scroll',this.fnLoad);
this.removeHandler(window,'resize',this.fnLoad);
return
}
var st = document.body.scrollTop || document.documentElement.scrollTop,
clientH = document.documentElement.clientHeight,
scrollArea = st + clientH;
for(var n=0;n<this.imgList.length;n++){
var offsetTop = this.imgList[n].getBoundingClientRect().top+st,
imgH = this.imgList[n].clientHeight;
if( scrollArea>(offsetTop-200)&&(imgH+offsetTop)>st ){
var _src = this.imgList[n].getAttribute(this.holderSrc);
this.imgList[n].setAttribute('src',_src);
this.imgList.splice(n,1);//删除已经加载完的元素
n--;
}
} },
bind:function(obj,fn){
var _this = this;
return function(){
if(_this.timer) clearTimeout(_this.timer);
_this.timer = setTimeout(function(){
fn.apply(obj,arguments);
},300); }
},
addHandler:function(node,type,fn){
if(node.addEventListener){
node.addEventListener(type,fn,false);
}
else{
node.attachEvent('on'+type,function(){
fn.apply(node,arguments);
});
}
},
removeHandler: function(node, type, fn) {
if (node.addEventListener) {
node.removeEventListener(type, fn, false);
} else {
node.detachEvent("on" + type, fn);
}
}
}
<body id="body">
<img src="xxxx" width="990" height="90" data-src="http://dummyimage.com/990x90/333/fff" alt="">
<img src="xxxx" width="990" height="90" data-src="http://dummyimage.com/990x90/f60/fff" alt="">
<img src="xxxx" width="990" height="90" data-src="http://dummyimage.com/990x90/259/fff" alt="">
<img src="xxxx" width="990" height="90" data-src="http://dummyimage.com/990x90/999/fff" alt="">
<img src="xxxx" width="990" height="90" data-src="http://dummyimage.com/990x90/4D3434/fff" alt="">
<img src="xxxx" width="990" height="90" data-src="http://dummyimage.com/990x90/344D3C/fff" alt="">
<script type="text/javascript" src="scrollLazy.js"></script>
<script type="text/javascript">
new LazyScroll({'wrapId':'body'});
</script>
</body>

原生javascript-图片滚动按需加载的更多相关文章

  1. 转:按需加载html 图片 css js

    按需加载是前端性能优化中的一项重要措施,按需加载是如何定义的呢?顾名思义,指的是当用户触发了动作时才加载对应的功能.触发的动作,是要看具体的业务场景而言,包括但不限于以下几个情况:鼠标点击.输入文字. ...

  2. js-页面需展示大量图片时,采用lyz.delayLoading.min.js,图片在屏幕时加载显示

    本文本内容拷贝至:https://blog.csdn.net/xuanwuziyou/article/details/48199123 当一个网页中有大量图片时,浏览器会逐个去下载这些图片,等全部下载 ...

  3. CSS和JavaScript以及Ajax实现预加载图片的方法及优缺点分析

    预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画 廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发 ...

  4. 关于前端本地压缩图片,兼容IOS/Android/PC且自动按需加载文件之lrz.bundle.js

    一.介绍说明主要特点: ①在前端压缩好要上传的图片可以更快的发送给后端,因此也特别适合在移动设备上使用. ②兼容IOS/Android,修复了IOS/Android某些版本已知的BUG. ③按需加载文 ...

  5. jQuery:实现图片按需加载的方法,当要显示内容的高度超过了页面的高度,按需加载,根据滚动条的位置来判断页面显示的内容

    实现图片按需加载的方法,当要显示内容的高度超过了页面的高度,按需加载,根据滚动条的位置来判断页面显示的内容 这个类似于京东或淘宝页面,根绝页面的滚动,显示下面的内容 如下图所示,一开始并不是所有的图片 ...

  6. jQuery页面滚动图片等元素动态加载实现

    一.关于滚动显屏加载 常常会有这样子的页面,内容很丰富,页面很长,图片较多.比如说光棍节很疯狂的淘宝商城页面. 或者是前段时间写血本买了个高档耳机的京东商城页面,或者是新浪微博之类. 这些页面图片数量 ...

  7. [转]jQuery页面滚动图片等元素动态加载实现

    本文转自:http://www.zhangxinxu.com/wordpress/?p=1259 一.关于滚动显屏加载 常常会有这样子的页面,内容很丰富,页面很长,图片较多.比如说光棍节很疯狂的淘宝商 ...

  8. Yii2按需加载图片怎么做?

    按需加载图片应该用 jQuery LazyLoad 图片延迟加载按需加载文件夹应该用 Yii::import

  9. vue路由管理-保留滚动位置功能、按需加载模块名自定义

    路由管理:保留滚动位置 其实现与组件的keep-alive相关,仅设置了keep-aive的页面,实施保留回退位置能力. keep-alive介绍 作用 把切换出去的组件保留在内存中,可以保留它的状态 ...

随机推荐

  1. PL/SQL集合(一):记录类型(TYPE 类型名称 IS RECORD)

    记录类型 利用记录类型可以实现复合数据类型的定义: 记录类型允许嵌套: 可以直接利用记录类型更新数据. 传统操作的问题 对于Oracle数据类型,主要使用的是VARCHAR2.NUMBER.DATE等 ...

  2. Python爬虫框架Scrapy实例(一)

    目标任务:爬取腾讯社招信息,需要爬取的内容为:职位名称,职位的详情链接,职位类别,招聘人数,工作地点,发布时间. 一.创建Scrapy项目 scrapy startproject Tencent 命令 ...

  3. jQuery至上宝典

    一 jQuery是什么? <1> jQuery由美国人John Resig创建,至今已吸引了来自世界各地的众多 javascript高手加入其team. <2>jQuery是继 ...

  4. Python开发【模块】:logging日志

    logging模块 很多程序都有记录日志的需求,并且日志中包含的信息即有正常的程序访问日志,还可能有错误.警告等信息输出,python的logging模块提供了标准的日志接口,你可以通过它存储各种格式 ...

  5. Linux学习-->如何通过Shell脚本实现发送邮件通知功能?

    1.安装和配置sendmail 不需要注册公网域名和MX记录(不需要架设公网邮件服务器),通过Linux系统自带的mail命令即可对公网邮箱发送邮件.不过mail命令是依赖sendmail的,所以我们 ...

  6. OOP理解

    https://www.cnblogs.com/xiaosongluffy/p/5072501.html OOP是面向对象编程,有几大基础特性.抽象,封装,继承,多态 1:抽象:将世界上的具体事物提取 ...

  7. HBase1.2.0增删改查Scala代码实现

    增删改查工具类 class HbaseUtils { /** * 获取管理员对象 * * @param conf 对hbase client配置一些参数 * @return 返回hbase的HBase ...

  8. python + unittest 做单元测试之学习笔记

    单元测试在保证开发效率.可维护性和软件质量等方面有很重要的地位,所谓的单元测试,就是对一个类,一个模块或者一个函数进行正确性检测的一种测试方式. 这里主要是就应用 python + unitest 做 ...

  9. samba安装测试

    1.检查是否系统有自带的samba安装包 2.关闭防火墙 Iptables -F Systemctl disable firewalld Systemctl stop firewalld System ...

  10. linux服务器查看IO

    为了方便各位和自己今后遇到此类问题能尽快解决,我这里将查看linux服务器硬盘IO访问负荷的方法同大家一起分享: 首先 .用top命令查看 top - 16:15:05 up 6 days,  6:2 ...