威尼斯人线上娱乐

【威尼斯人线上娱乐】1段落成页面上的图纸延时加载的js代码,图片懒加载方法

27 4月 , 2019  

图表懒加载插件实战

2016/07/28 · JavaScript
· 插件

正文小编: 伯乐在线 –
陈被单
。未经小编许可,禁止转发!
招待出席伯乐在线 专栏撰稿人。

众多网址都会用到‘图片懒加载’那种方法对网址开始展览优化,即延迟加载图片或符合有些标准才起来加载图片。于是心血来潮,决定自个儿手动写一下’图片懒加载‘插件。

  • 动用那个能力有何显然的亮点?

诸如贰个页面中有大多图片,如天猫商城首页等等,多个页面有100多的图样,如若一上来就发送这么多请求,页面加载就会很遥远,假设js文件都献身了文书档案的尾巴部分,恰巧页面包车型大巴底部又凭仗那一个js文件,那就不佳办了。用户认为那一个页面就会很卡。

  • 懒加载原理:浏览器会自行对页面中的img标签的src属性发送请求并下载图片。通过动态改造img的src属性实现。

当访问三个页面包车型客车时候,先把img成分或是别的因素的背景图片路线替换来loading图片地址(那样就只需请求三次)

等到自然条件(那里是页面滚动到一定区域),用实际存放img地址的laze-load属性的值去替换src属性,就可以完成’懒加载’。

//即便img的src值为空,浏览器也会对服务器发送请求。所以日常做项目标时候,借使img未有运用src,就无须出现src那特天性

  • 先上四个重视的知识点

1.获得荧屏可视窗口大小:

document.documentElement.clientHeight 标准浏览器及低版本IE标准格局

document.body.clientHeight 低版本混杂格局

二.成分相对于文档document顶部

element.offsetTop

三.滚动条滚动的相距

document.documentElement.scrollTop   包容ie低版本的正规化方式

document.body.scrollTop 包容混合方式;

滚动加载:当图片出现在可视区域时,动态加载该图形。

原理:当图片成分顶部是不是在可视区域内,(图片相对于文书档案document顶部-滚动条滚动的偏离)

落到实处原理:

1.先是从全数相关因素中找寻必要延时加载的要素,放在element_obj数组中。

JavaScript

function initElementMap() { var el =
document.getElementsByTagName(‘img’); for (var j = 0, len二 = el.length;
j < len二; j++) { //判别当前的img是不是加载过了,也许有lazy_src标志
[未完成] if (typeof (el[j].getAttribute(“lazy_src”))) {
element_obj.push(el[j]); download_count++; } } }

1
2
3
4
5
6
7
8
9
10
function initElementMap() {
      var el = document.getElementsByTagName(‘img’);
      for (var j = 0, len2 = el.length; j < len2; j++) {
  //判断当前的img是否加载过了,或者有lazy_src标志  [未完成]
          if (typeof (el[j].getAttribute("lazy_src"))) {
              element_obj.push(el[j]);
              download_count++;
          }
      }
}

二.论断数组中的img对象,若满意条件,则改造src属性

JavaScript

function lazy() { if (!download_count) return; var innerHeight =
getViewport(); for (var i = 0, len = element_obj.length; i < len;
i++) { //获得图片相对document的距上偏离 var t_index =
getElementViewTop(element_obj[i]); if (t_index – getScrollTop() <
innerHeight) { element_obj[i].src =
element_obj[i].getAttribute(“lazy-src”); delete element_obj[i];
download_count–; } } }

1
2
3
4
5
6
7
8
9
10
11
12
13
function lazy() {
    if (!download_count) return;
    var innerHeight = getViewport();
    for (var i = 0, len = element_obj.length; i < len; i++) {
//得到图片相对document的距上距离
        var t_index = getElementViewTop(element_obj[i]);    
        if (t_index – getScrollTop() < innerHeight) {
            element_obj[i].src = element_obj[i].getAttribute("lazy-src");
            delete element_obj[i];
            download_count–;
        }
    }
}

三.轮转的时候接触事件,1000飞秒后实践lazy()方法。

JavaScript

window.onscroll = window.onload = function () { setTimeout(function () {
lazy(); }, 1000) }

1
2
3
4
5
window.onscroll = window.onload = function () {
    setTimeout(function () {
        lazy();
    }, 1000)
}

整片段代码位于闭包自实行函数中。相应的章程放在init中。

JavaScript

var lazyLoad = (function () { function init() { initElementMap();
lazy(); }; return { init: init } })();

1
2
3
4
5
6
7
8
9
var lazyLoad = (function () {  
    function init() {
        initElementMap();
        lazy();
    };
    return {
        init: init    
    }
})();

采取格式
:src填私下认可loading图片地址,真实的图形地址填在lazy-src属性里,切记需点名宽高。在表面调用
 lazyLoad.init();

 全部的代码以及例子已经上传到github上了,地址是:,欢迎star。

打赏扶助本身写出越多好文章,多谢!

打赏小编

相关地方:

连带地方:

图表懒加载方法,加载

多年来起来整治一些在先写的好用的插件,…^-^!!!

乘机页面新闻更是丰裕精神,特别像天猫,京东等等的购物网址,首页就是她们的生命线,-
-||||

近年来在做某银行的网址,只有挤上首页技巧获得更加多的爱戴,于是乎各个业务职员就从头了首页地点之争,为了止息他们的战火。呈现本身大方包容的一面
,啊哈哈哈

首页囊括了她们全体的供给,他们看中的撤出了,结果技能首席营业官来了,说首页加载怎么如此大,于是乎,减!!!

大胆,裁减图片K数,不够,那怎么做,好呢,进入正题。长页面未显示的有的能够先不加载,省流量就是省钱,开搞!!!

思路便是,推断图片在页面中的地方,假设图片的地点大于小于当前的显示屏高度,那么显示图片,否则隐藏图片。

怎么壹开端东躲江苏图片呢,很轻巧,<img
csii_src=”1.png”>,给三个浏览器不认知的习性csii_src,当供给出示图片的时候在element.src=element.getAttribute(“csii_src”);,思路很简短吗,上代码了。

 

function lazyLoad() {
var map_element = {};
var element_obj = [];
var download_count = 0;
var last_offset = -1;
var doc_body = null;
var doc_element = null;
var lazy_load_tag = [];
function initVar(tags) {
doc_body = document.body;
doc_element = document.compatMode == ‘BackCompat’ ? doc_body
: document.documentElement;
lazy_load_tag = tags || [ “img”, “iframe” ];
}
;
function initElementMap() {
for ( var i = 0, len = lazy_load_tag.length; i < len; i++) {
var el = document.getElementsByTagName(lazy_load_tag[i]);
for ( var j = 0, len2 = el.length; j < len2; j++) {
if (typeof (el[j]) == “object”
&& el[j].getAttribute(“csii_src”)) {
element_obj.push(el[j]);
}
}
}

for ( var i = 0, len = element_obj.length; i < len; i++) {
var o_img = element_obj[i];
var t_index = getAbsoluteTop(o_img);
if (map_element[t_index]) {
map_element[t_index].push(i);
} else {
var t_array = [];
t_array[0] = i;
map_element[t_index] = t_array;
download_count++;
}
}

}
;
function initDownloadListen() {
if (!download_count)
return;
/*var offset = (window.MessageEvent && !document.getBoxObjectFor) ?
doc_body.scrollTop
: doc_element.scrollTop;*/
var offset;
if(os.firefox){
offset = doc_element.scrollTop;
}else{
offset = doc_body.scrollTop;
}

var visio_offset = offset + doc_element.clientHeight;
if (last_offset == visio_offset) {
// setTimeout(initDownloadListen, 200);
return;
}
last_offset = visio_offset;
var visio_height = doc_element.clientHeight;
var img_show_height = visio_height + offset + 20;
for ( var key in map_element) {
【威尼斯人线上娱乐】1段落成页面上的图纸延时加载的js代码,图片懒加载方法。if (img_show_height > key) {
var t_o = map_element[key];
var img_vl = t_o.length;
for ( var l = 0; l < img_vl; l++) {
element_obj[t_o[l]].src = element_obj[t_o[l]]
.getAttribute(“csii_src”);
}
delete map_element[key];
download_count–;
}
}
// setTimeout(initDownloadListen, 200);
}
;
function getAbsoluteTop(element) {
if (arguments.length != 1 || element == null) {
return null;
}
var offsetTop = element.offsetTop;
while (element = element.offsetParent) {
offsetTop += element.offsetTop;
}
return offsetTop;
}
function init(tags) {
initVar(tags);
initElementMap();
initDownloadListen();
$(window).scroll(function(){
威尼斯人线上娱乐 ,initDownloadListen();
});
}
;
init();
}

 

不足之处,页面结构必须已定好,图片的低度务必安装好,不然,不可能测算图片距离顶部的莫斯中国科学技术大学学。需注意。

近来起首收十一些在先写的好用的插件,^-^!!!
随着页面音信更是丰裕精神,尤其像天猫,京东等等的购物网站,…

打赏接济自个儿写出越来越多好小说,谢谢!

任选一种支付格局

威尼斯人线上娱乐 1
威尼斯人线上娱乐 2

3 赞 11 收藏
评论

世家只要接纳firebug去查看的话就会发觉,当你滚动到相应的行时,当前行的图纸才即时加载的,那样子的话页面在打开只加可视区域的图样,而别的隐藏的图样则不加载,一定程序上加速了页面加载的进程,对于相比较长的页面来讲,这些方案是相比好的。
贯彻原理
把具备要求延时加载的图纸改成如下的格式:

世家假设应用firebug去查看的话就会开采,当你滚动到相应的行时,当前行的图纸才即时加载的,那样子的话页面在开发只加可视区域的图形,而其他隐藏的图样则不加载,一定程序上加速了页面加载的快慢,对于相比长的页面来讲,那些方案是相比好的。
贯彻原理
把装有要求延时加载的图纸改成如下的格式:

至于笔者:陈被单

威尼斯人线上娱乐 3

热爱前端,招待交流
个人主页 ·
小编的稿子 ·
19 ·
  

威尼斯人线上娱乐 4

<img lazy_src=”图片路线” border=”0″/>

<img lazy_src=”图片路线” border=”0″/>

接下来在页面加载时,把富有应用了lazy_src的图形都保存到数组里,然后在滚动时总括可视区域的top,然后把延时加载的图片中top小于当前可视区域(即图片出现在可视区域内)的图形的src的值用lazy_src的来替换(加载图片)

接下来在页面加载时,把具有应用了lazy_src的图纸都封存到数组里,然后在滚动时计算可视区域的top,然后把延时加载的图样中top小于当前可视区域(即图片出现在可视区域内)的图纸的src的值用lazy_src的来替换(加载图片)

代码

代码

复制代码 代码如下:

复制代码 代码如下:

lazyLoad=(function() {
var map_element = {};
var element_obj = [];
var download_count = 0;
var last_offset = -1;
var doc_body;
var doc_element;
var lazy_load_tag;
function initVar(tags) {
doc_body = document.body;
doc_element = document.compatMode == ‘BackCompat’ ? doc_body:
document.documentElement;
lazy_load_tag = tags || [“img”, “iframe”];
};
function initElementMap() {
var all_element = [];
//从具有有关要素中寻找须求延时加载的成分
for (var i = 0,
len = lazy_load_tag.length; i < len; i++) {
var el = document.getElementsByTagName(lazy_load_tag[i]);
for (var j = 0,
len2 = el.length; j < len2; j++) {
if (typeof(el[j]) == “object” && el[j].getAttribute(“lazy_src”))
{
element_obj.push(all_element[key]);
}
}
}

lazyLoad=(function() {
var map_element = {};
var element_obj = [];
var download_count = 0;
var last_offset = -1;
var doc_body;
var doc_element;
var lazy_load_tag;
function initVar(tags) {
doc_body = document.body;
doc_element = document.compatMode == ‘BackCompat’ ? doc_body:
document.documentElement;
lazy_load_tag = tags || [“img”, “iframe”];
};
function initElementMap() {
var all_element = [];
//从全数有关要素中搜索必要延时加载的因素
for (var i = 0,
len = lazy_load_tag.length; i < len; i++) {
var el = document.getElementsByTagName(lazy_load_tag[i]);
for (var j = 0,
len2 = el.length; j < len2; j++) {
if (typeof(el[j]) == “object” && el[j].getAttribute(“lazy_src”))
{
element_obj.push(all_element[key]);
}
}
}

for (var i = 0,
len = element_obj.length; i < len; i++) {
var o_img = element_obj[i];
var t_index = getAbsoluteTop(o_img);//获得图片相对document的距上偏离
if (map_element[t_index]) {
map_element[t_index].push(i);
} else {
//按距上距离保存1个队列
var t_array = [];
t_array[0] = i;
map_element[t_index] = t_array;
download_count++;//需要延时加载的图片数量
}
}

for (var i = 0,
len = element_obj.length; i < len; i++) {
var o_img = element_obj[i];
var t_index = getAbsoluteTop(o_img);//获得图片相对document的距上偏离
if (map_element[t_index]) {
map_element[t_index].push(i);
} else {
//按距上偏离保存叁个队列
var t_array = [];
t_array[0] = i;
map_element[t_index] = t_array;
download_count++;//须求延时加载的图纸数量
}
}

};
function initDownloadListen() {
if (!download_count) return;
var offset = (window.MessageEvent && !document.getBoxObjectFor) ?
doc_body.scrollTop: doc_element.scrollTop;
//可视化区域的offtset=document的高+
var visio_offset = offset + doc_element.clientHeight;
if (last_offset == visio_offset) {
setTimeout(initDownloadListen, 200);
return;
}
last_offset = visio_offset;
var visio_height = doc_element.clientHeight;
var img_show_height = visio_height + offset;
for (var key in map_element) {
if (img_show_height > key) {
var t_o = map_element[key];
var img_vl = t_o.length;
for (var l = 0; l < img_vl; l++) {
element_obj[t_o[l]].src =
element_obj[t_o[l]].getAttribute(“lazy_src”);
}
delete map_element[key];
download_count–;
}
}
setTimeout(initDownloadListen, 200);
};
function getAbsoluteTop(element) {
if (arguments.length != 1 || element == null) {
return null;
}
var offsetTop = element.offsetTop;
while (element = element.offsetParent) {
offsetTop += element.offsetTop;
}
return offsetTop;
}
function init(tags) {
initVar(tags);
initElementMap();
initDownloadListen();
};
return {
init: init
}
})();

};
function initDownloadListen() {
if (!download_count) return;
var offset = (window.MessageEvent && !document.getBoxObjectFor) ?
doc_body.scrollTop: doc_element.scrollTop;
//可视化区域的offtset=document的高+
var visio_offset = offset + doc_element.clientHeight;
if (last_offset == visio_offset) {
setTimeout(initDownloadListen, 200);
return;
}
last_offset = visio_offset;
var visio_height = doc_element.clientHeight;
var img_show_height = visio_height + offset;
for (var key in map_element) {
if (img_show_height > key) {
var t_o = map_element[key];
var img_vl = t_o.length;
for (var l = 0; l < img_vl; l++) {
element_obj[t_o[l]].src =
element_obj[t_o[l]].getAttribute(“lazy_src”);
}
delete map_element[key];
download_count–;
}
}
setTimeout(initDownloadListen, 200);
};
function getAbsoluteTop(element) {
if (arguments.length != 1 || element == null) {
return null;
}
var offsetTop = element.offsetTop;
while (element = element.offsetParent) {
offsetTop += element.offsetTop;
}
return offsetTop;
}
function init(tags) {
initVar(tags);
initElementMap();
initDownloadListen();
};
return {
init: init
}
})();

选用方法:把页面上须要延时加载的图形src改成为lazy_src,然后把地点的js放到body最前边,然后调用:lazyLoad.init();
猥亵的办法可以运用firebug来查阅目前图片是否是延时加载。
另外:
假使你的页面上设有有内容切换的栏目标话,恐怕在切换时切换的内容里的图纸或者会不显得,管理的情势是在内容时单身图片加载管理,如:

使用方法:把页面上急需延时加载的图样src改成为lazy_src,然后把下边包车型客车js放到body最末尾,然后调用:lazyLoad.init();
吐槽的办法能够应用firebug来查看一时半刻图片是还是不是是延时加载。
另外:
假定你的页面上存在有内容切换的栏目标话,或者在切换时切换的剧情里的图形大概会不出示,管理的格局是在剧情时独自图片加载管理,如:

复制代码 代码如下:

复制代码 代码如下:

///切换内容的代码…
chlid.find(“img[init_src]”).each(function(){
$(this).attr(“src”,$(this).attr(“init_src”));
$(this).removeAttr(“init_src”);
});

///切换内容的代码…
chlid.find(“img[init_src]”).each(function(){
$(this).attr(“src”,$(this).attr(“init_src”));
$(this).removeAttr(“init_src”);
});

您只怕感兴趣的小说:

  • 1段差不离能够让您死机的JS代码
  • 一段分外简单的让图片自动切换js代码
  • 壹段js小代码,总括距新禧还有多少天
  • 1段多浏览器的”复制到剪贴板”javascript代码
  • Discuz!
    五.0.0论坛程序中参加1段js代码,让会员点击下载附件前自行弹出提示窗口
  • javascript生成/解析dom的CDATA类型的字段的代码
  • 1段超强的javascript代码解密方法
  • 同步来写段JS drag拖动代码
  • js 获取后台的字段 改动 checkbox的被入选的情况代码
  • 超实用的JavaScript代码段
    附使用格局


相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图