图片懒加载插件实例分享(含解析)


Posted in Javascript onJanuary 09, 2017

在面试的时候有面试官问我,懒加载这个插件你有没有想到如何去优化?又间接问我函数节流的问题,嘿嘿,今天就更新下这个插件,顺便应用下函数节流(throttle),先直接上下代码,含解析

/*
 * 函数功能:函数节流
 * fn 需要调用的函数
 * delay 函数需要延迟处理的时间
 * mustRunDelay 超过该时间,函数一定会执行
 * */
 var throttle = function (fn, delay, mustRunDelay) {
 var timer; //使用闭包存储timer
 var t_start;
 //闭包返回的函数
 return function (val) {
 var args = arguments, t_curr = +new Date(); //使用+new Date() 将字符串转换成数字
 clearTimeout(timer);
 if (!t_start) { // 使用!t_start 如果t_start=undefined或者null 则为true
 t_start = t_curr;
 }
 if (t_curr - t_start >= mustRunDelay) {
 fn.apply(null, args);
 t_start = t_curr;
 } else {
 timer = setTimeout(function () {
  fn.apply(null, args);
 }, delay);
 }
 }
 };
 /*使用方法*/
 var throttle1 = throttle(fn, 500, 4000);
 //在该需要调用的函数内部调用此函数
 throttle1(val); //此处传人的参数为以上fn需要传人的参数

至于函数节流具体的好处,常用的场景,以下文章说得非常清楚,我就不再说啦~

很多网站都会用到‘图片懒加载'这种方式对网站进行优化,即延迟加载图片或符合某些条件才开始加载图片。于是心血来潮,决定自己手动写一下'图片懒加载‘插件。

使用这个技术有什么显著的优点?

比如一个页面中有很多图片,如淘宝首页等等,一个页面有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顶部-滚动条滚动的距离)< 可视窗口大小,改变该img的src属性 

实现原理:

1.首先从所有相关元素中找出需要延时加载的元素,放在element_obj数组中。

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属性

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()方法。

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

整部分代码位于闭包自执行函数中。相应的方法放在init中。

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

使用格式 :src填默认loading图片地址,真实的图片地址填在lazy-src属性里,切记需指定宽高。在外部调用  lazyLoad.init();

全部的代码以及例子已经上传到github上了,地址是:https://github.com/beidan/lazeLoadImg,欢迎star

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
通用JS事件写法实现代码
Jan 07 Javascript
JS鼠标事件大全 推荐收藏
Nov 01 Javascript
Javascript实现简单二级下拉菜单实例
Jun 15 Javascript
JavaScript操作选择对象的简单实例
May 16 Javascript
Avalon中文长字符截取、关键字符隐藏、自定义过滤器
May 18 Javascript
JavaScript必知必会(六) delete in instanceof
Jun 08 Javascript
JS写XSS cookie stealer来窃取密码的步骤详解
Nov 20 Javascript
利用babel将es6语法转es5的简单示例
Dec 01 Javascript
React Hooks的深入理解与使用
Nov 12 Javascript
TypeScript之调用栈的实现
Dec 31 Javascript
vue使用element-ui实现表单验证
Dec 13 Vue.js
vue.js 使用原生js实现轮播图
Apr 26 Vue.js
微信小程序 数据封装,参数传值等经验分享
Jan 09 #Javascript
简单实现jQuery多选框功能
Jan 09 #Javascript
微信小程序开发之Tabbar实例详解
Jan 09 #Javascript
javascript监听页面刷新和页面关闭事件方法详解
Jan 09 #Javascript
JS获得多个同name 的input输入框的值的实现方法
Jan 09 #Javascript
微信小程序去哪里找 小程序到底如何使用(附小程序名单)
Jan 09 #Javascript
原生Javascript插件开发实践
Jan 09 #Javascript
You might like
咖啡知识大全
2021/03/03 新手入门
PHP实现显示照片exif信息的方法
2014/07/11 PHP
php判断并删除空目录及空子目录的方法
2015/02/11 PHP
thinkphp配置文件路径的实现方法
2016/08/30 PHP
PHP单元测试配置与使用方法详解
2019/12/27 PHP
浅谈Javascript面向对象编程
2011/11/15 Javascript
关于jquery.validate1.9.0前台验证的使用介绍
2013/04/26 Javascript
深入理解JavaScript系列(45):代码复用模式(避免篇)详解
2015/03/04 Javascript
jQuery插件Tmpl的简单使用方法
2015/04/27 Javascript
利用jQuery实现漂亮的圆形进度条倒计时插件
2015/09/30 Javascript
jQuery中队列queue()函数的实例教程
2016/05/03 Javascript
TinyMCE汉化及本地上传图片功能实例详解
2016/05/31 Javascript
数据结构中的各种排序方法小结(JS实现)
2016/07/23 Javascript
Bootstrap3 模态框使用实例
2017/02/22 Javascript
JSON基本语法及与JavaScript的异同实例分析
2019/01/04 Javascript
javascript for循环性能测试示例
2019/08/07 Javascript
[01:37]PWL S2开团时刻DAY1&2——这符有毒
2020/11/20 DOTA
[41:21]夜魇凡尔赛茶话会 第三期02:看图识人
2021/03/11 DOTA
linux系统使用python监测系统负载脚本分享
2014/01/15 Python
python局域网ip扫描示例分享
2014/04/03 Python
python实现类似ftp传输文件的网络程序示例
2014/04/08 Python
python利用paramiko连接远程服务器执行命令的方法
2017/10/16 Python
python实现神经网络感知器算法
2017/12/20 Python
python实现指定字符串补全空格、前面填充0的方法
2018/11/16 Python
对Python捕获控制台输出流的方法详解
2019/01/07 Python
python 监测内存和cpu的使用率实例
2019/11/28 Python
django Layui界面点击弹出对话框并请求逻辑生成分页的动态表格实例
2020/05/12 Python
美国知名艺术画网站:Art.com
2017/02/09 全球购物
波兰最大的度假胜地和城市公寓租赁运营商:Sun & Snow
2018/10/18 全球购物
递归实现回文判断(如:abcdedbca就是回文,判断一个面试者对递归理解的简单程序)
2013/04/28 面试题
超市5.1促销活动
2014/01/15 职场文书
学前教育专业求职信
2014/09/02 职场文书
医德考评自我评价
2014/09/14 职场文书
公司财务部岗位职责
2015/04/14 职场文书
南极大冒险观后感
2015/06/05 职场文书
国际最新研究在陨石中发现DNA主要成分 或由陨石带来地球
2022/04/29 数码科技