##1.什么是lazy-loading
图片“懒加载”

为img标签src设置统一的图片链接，而将真实链接地址装在自定义属性中。
所以开始时候图片是不会加载的，我们将满足条件的图片的src重置为自定义属性便可实现延迟加载功能

##2.实现方法

思想其实很简单，就是当图片相对于视口的距离小于视口高度的时候就置换图片的src！

而图片的相对于视口的距离用getBoundingClientRect()简直so easy。

##3.demo代码

<!DOCTYPE html>

<html>

<head>

	<title>lazy loading</title>

	<style type="text/css">

	img {

	display: block;

	margin: 600px 100px;

	}

</style>

</head>

<body>

	<div class="zone">

		<img width="612" height="612" data-src="http://farm8.staticflickr.com/7060/6969705425_0905bf6bba_o.jpg" src="img/loading.png" class="lazy">

		<img width="612" height="612" data-src="http://farm8.staticflickr.com/7203/6969484613_0ee3af0144_o.jpg" src="img/loading.png" class="lazy">

		<img width="612" height="612" data-src="http://farm8.staticflickr.com/7207/6821596428_cdae70e306_o.jpg" src="img/loading.png" class="lazy">

		<img width="612" height="612" data-src="http://farm8.staticflickr.com/7037/6965140403_9fbb5e7f96_o.jpg" src="img/loading.png" class="lazy">

	</div>

<script type="text/javascript" src="jquery.min.js"></script>

<script type="text/javascript">

	$(function() {

		function loadImage (el, fn) {

			src = el.getAttribute('data-src');

			el.src = src;

			fn? fn() : null;

		}

		function elementInViewport(el) {

			var rect = el.getBoundingClientRect()

			return (

			rect.top >= 0 && rect.left >= 0 && rect.top <= (window.innerHeight || document.documentElement.clientHeight)

			)

		}

		var query = $('.lazy'),

			images = new Array(),

			processScroll = function() {

				for (var i = 0; i < images.length; i++) {

					if (elementInViewport(images[i])) {

						loadImage(images[i], function() {

							images.splice(i, 1);

							console.log(images.length)

						});

					}

				};

			};

		for (var i = 0; i < query.length; i++) {

		    images.push(query[i]);

		};

		window.addEventListener('scroll', processScroll);

	})

</script>

</body>

</html>

##4.问题与优化

于是功能便实现了，但是其实也有很多问题，比如打开页面，然后又点去别的窗口，看了部av回来后本以为这个页面图片已经缓冲好了结果尼玛啊拉下去还是要重新加载....所以需要判断这种情况，今天没时间了以后再针对这个写一下吧。

##5.参考资料

CSS-tricks

另一个视角来看
##6.代码勘误
用for循环遍历的话，会有问题，因为数组也在动态的变化，

Javascript 在 for in 或 foreach 遍历中，会自动跳过 undefined 元素，而普通 for 遍历则不会。

processScroll = function() {

	var len = images.length;

    for (var i in images) {

        if (elementInViewport(images[i])) {

            loadImage(images[i], function() {

                delete images[i];

                console.log(i);

            });

        }

    };

};

【前端优化】图片延迟加载Lazy-loading的原理与简单实现的更多相关文章

  1. Lazyr.js – 延迟加载图片（Lazy Loading）

    Lazyr.js 是一个小的.快速的.现代的.相互间无依赖的图片延迟加载库.通过延迟加载图片,让图片出现在(或接近))视窗才加载来提高页面打开速度.这个库通过保持最少选项并最大化速度. 在线演示    ...

  2. Entity Framework加载相关实体——延迟加载Lazy Loading、贪婪加载Eager Loading、显示加载Explicit Loading

    Entity Framework提供了三种加载相关实体的方法:Lazy Loading,Eager Loading和Explicit Loading.首先我们先来看一下MSDN对三种加载实体方法的定义 ...

  3. 前端页面优化：javascript图片延迟加载

    自己写了个简单的图片延迟加载小插件. 功能如下: 页面刷新,当前屏幕图片直接加载真实地址,body被卷去的部分和下方未显示的部分的img均加载通用图片如:loding.gif 随着屏幕上下滚动加载相应 ...

  4. 前端优化之图片延迟加载（lazyload.js）

    要想缩短首屏加载时间,思路一般是减少http请求次数和降低每次的请求量.本文中使用现成的lazyload.js插件,文末会放出下载地址. lazyload.js可以实现图片分批次加载,不是一次性加载完 ...

  5. 图片延时加载原理 和 使用jquery实现的一个图片延迟加载插件（含图片延迟加载原理）

    图片加载技术分为:图片预加载和图片延时加载. javascript图片预加载和延时加载的区别主要体现在图片传输到客户端的时机上,都是为了提升用户体验的,延时加载又叫懒加载.两种技术的本质:两者的行为是 ...

  6. 利用图片延迟加载来优化页面性能（jQuery）

    图片延迟加载也称懒加载,常用于页面很长,图片很多的页面,以电子商务网站居多,比如大家常上的京东,淘宝,页面以图居多,整个页面少说几百K,多则上兆,如果想一次性加载完成,不仅用户要哭了,服务器也得哭了. ...

  7. 你所不知道的库存超限做法 服务器一般达到多少qps比较好[转] JAVA格物致知基础篇：你所不知道的返回码 深入了解EntityFramework Core 2.1延迟加载（Lazy Loading） EntityFramework 6.x和EntityFramework Core关系映射中导航属性必须是public？ 藏在正则表达式里的陷阱 两道面试题，带你解析Java类加载机制

    你所不知道的库存超限做法 在互联网企业中,限购的做法,多种多样,有的别出心裁,有的因循守旧,但是种种做法皆想达到的目的,无外乎几种,商品卖的完,系统抗的住,库存不超限.虽然短短数语,却有着说不完,道不 ...

  8. Lazy Load 图片延迟加载(转)

    jQuery Lazy Load 图片延迟加载来源 基于 jQuery 的图片延迟加载插件,在用户滚动页面到图片之后才进行加载. 对于有较多的图片的网页,使用图片延迟加载,能有效的提高页面加载速度. ...

  9. jQuery Lazy Load 图片延迟加载

    基于 jQuery 的图片延迟加载插件,在用户滚动页面到图片之后才进行加载. 对于有较多的图片的网页,使用图片延迟加载,能有效的提高页面加载速度. 版本: jQuery v1.4.4+ jQuery ...

随机推荐

  1. JS数字转字符串的方法(number to string)

    一.双点解析 ..toString(); 二.括号先计算再转换 ().toString(); 三.加空串 + ''

  2. 力扣——Next Permutation（下一个排列） python实现

    题目描述: 中文: 实现获取下一个排列的函数,算法需要将给定数字序列重新排列成字典序中下一个更大的排列. 如果不存在下一个更大的排列,则将数字重新排列成最小的排列(即升序排列). 必须原地修改,只允许 ...

  3. Spring 讲解（四）

    Spring 中使用注解注入 注解:就是一个类,使用 @ 注解名称. 实际开发中:使用注解取代 xml 配置文件. 1.常用注解释义 @component 取代 <bean class=&quo ...

  4. JAVA 输入输出程序开发

    参考: java中 静态方法和非静态方法的区别 字符流的输入和输出 java文件创建.删除.读取.写入操作大全 Java键盘输入并且写入文件 File类的isDiretory Java统计子串在字符串 ...

  5. 【集群】Redis集群设计原理

    Redis集群设计包括2部分:哈希Slot和节点主从 节点主从: 主从设计不算什么新鲜玩意,在数据库中我们也经常用主从来做读写分离,直接上图: 图上能看得到的信息: 1, 只有1个Master,可以有 ...

  6. L1、L2损失函数、Huber损失函数

    L1范数损失函数,也被称为最小绝对值偏差(LAD),最小绝对值误差(LAE) L2范数损失函数,也被称为最小平方误差(LSE) L2损失函数 L1损失函数 不是非常的鲁棒(robust) 鲁棒 稳定解 ...

  7. CDN技术之--全局负载均衡（GSLB）

    负载均衡就是智能调度全局负载均衡(GSLB)的负载均衡主要是在多个节点之间进行均衡,其结果可能直接终结负载均衡过程,也可能将用户访问交付下一层次的(区域或本地)负载均衡系统进行处理.GSLB最通用的是 ...

  8. 为何使用Html5+CSS3

    一:大多浏览器支持,低版本也没问题 我看点这方面的资料,是为了做手机应用网站(有三个方案,这个是备用方案),可以开发响应式网站,可以脱离开发平台进行跨平台. 在Html5网页中引入Modernizr, ...

  9. [CSP-S模拟测试]:蛋糕（区间DP）

    题目传送门(内部题34) 输入格式 第一行,一个正整数$n$.第二行,$n$个正整数$a_i$,保证$a_i$互不相等. 输出格式 一行一个整数表示间宫卓司得到的蛋糕大小总和的最大值. 样例 样例输入 ...

  10. 并口、串口、COM口区别

          并行接口,简称并口.并口采用的是25针D形接头.所谓“并行”,是指8位数据同时通过并行线进行传送,这样数据传送速度大大提高,但并行传送的线路长度受到限制,因为长度增加,干扰就会增加,数据也 ...