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

讲解:

(一)需要按需加载的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. CH1401 兔子与兔子【字符串】【HASH】

    1401 兔子与兔子 0x10「基本数据结构」例题 描述 很久很久以前,森林里住着一群兔子.有一天,兔子们想要研究自己的 DNA 序列.我们首先选取一个好长好长的 DNA 序列(小兔子是外星生物,DN ...

  2. Swap---hdu2819(最大匹配)

    题意:通过交换行或者列来实现对角线(左上角到右下角)上都是1, 首先,如果某行全是0或者某列全是0必然不满足情况输出-1,如果能转换的话,那么必然可以通过全由行(列)变换得到: 还有就是对角线上的N个 ...

  3. OpenS-CAD学习(1)

    1.OpenS-CAD是一个不错的小巧的开源程序,以图层方式组织图形,可以绘制基本的线段.弧段.圆,可以进行节点对象捕捉,可以选择几何对象.对图幅进行平移.放大.缩小.可以将结果序列化保存为xml格式 ...

  4. 基于struts2--实现文件上传下载

    1. 文件的上传: 1). 表单需要注意的 3 点 ①. method="post"     ②. enctype="mulitipart/form-data" ...

  5. NPOI+反射+自定义特性实现上传excel转List及验证

    1.自定义特性 [AttributeUsage(AttributeTargets.Property, AllowMultiple = false, Inherited = true)] public ...

  6. 2016ACM/ICPC亚洲区沈阳站 Solution

    A - Thickest Burger 水. #include <bits/stdc++.h> using namespace std; int t; int a, b; int main ...

  7. Linux命令: grep命令

    基本用法                                                                                                 ...

  8. CyclicBarrier实现流水处理服务类

    package com.yzu.zhang.thread.concurrent; import java.util.Map.Entry; import java.util.Random; import ...

  9. c++第十九天

    p109~p110: C风格字符串 特点: 1.不方便,不安全,尽量不使用. 2.必须以 '\0'结束.(只有这样才能使用C风格字符串函数) 3.一般利用指针操作这些字符. 4.可以用字符串字面值来初 ...

  10. git-format-patch如何指定补丁生成的Subject格式

    答:使用-N来指定,如: git format-patch -N <commit-id> 生成的补丁中Subject将以[PATCH]的格式呈现,例如:Subject: [PATCH] a ...