>

图表懒加载插件实战,生机勃勃段达成页面上的

- 编辑:至尊游戏网站 -

图表懒加载插件实战,生机勃勃段达成页面上的

图形懒加载插件实战

2016/07/28 · JavaScript · 插件

正文小编: 伯乐在线 - 陈被单 。未经小编许可,幸免转发!
接待参预伯乐在线 专栏我。

广大网址都会用到‘图片懒加载’这种方法对网址进行优化,即延迟加载图片或切合某个标准才最初加载图片。于是灵机一动,决定本人手动写一下’图片懒加载‘插件。

  • 行使这几个手艺有啥鲜明的亮点?

比如二个页面中有非常多图片,如Taobao首页等等,几个页面有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 低版本混杂情势

2.成分相对于文档document最上部

element.offsetTop

3.滚动条滚动的相距

document.documentElement.scrollTop   兼容ie低版本的标准格局

document.body.scrollTop 宽容混合情势;

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

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

福寿康宁原理:

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

JavaScript

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++; } } }

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++;
          }
      }
}

2.决断数组中的img对象,若满足条件,则修正src属性

JavaScript

function lazy() { if (!download_count) return; var innerHeight = getViewport(); for (var i = 0, len = element_obj.length; i < len; i++卡塔尔(英语:State of Qatar) { //获得图片相对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--;
        }
    }
}

3.轮转的时候接触事件,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。

打赏扶持自个儿写出愈来愈多好文章,多谢!

打赏小编

相关位置:

打赏援救我写出更加多好随笔,感谢!

任选黄金时代种支付方式

图片 1 图片 2

3 赞 11 收藏 评论


世家假若利用firebug去查看的话就能够发觉,当您滚动到对应的行时,当前进的图片才即时加载的,这样子的话页面在打开只加可视区域的图形,而别的隐瞒的图样则不加载,一定程序上加快了页面加载的进程,对于比较长的页面来讲,这些方案是比较好的。
金玉满堂原理
把具备必要延时加载的图样改成如下的格式:

关于小编:陈被单

图片 3

热爱前端,款待调换 个人主页 · 小编的文章 · 19 ·   

图片 4

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

然后在页面加载时,把具有应用了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]);
}
}
}

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
}
})();

动用方法:把页面上急需延时加载的图纸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");
});

...

本文由设计建站发布,转载请注明来源:图表懒加载插件实战,生机勃勃段达成页面上的