金沙澳门官网网址:图形懒加载插件实战,后生

作者: 前端知识  发布:2019-11-14

图片懒加载插件实战

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 低版本混杂模式

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 ) { //得到图片相对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]);
}
}
}

本文由金沙澳门官网发布于前端知识,转载请注明出处:金沙澳门官网网址:图形懒加载插件实战,后生

关键词: 金沙澳门官网