【前端优化】图片延迟加载Lazy-loading的原理与简单实现
##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.参考资料
另一个视角来看
##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的原理与简单实现的更多相关文章
- Lazyr.js – 延迟加载图片（Lazy Loading）
Lazyr.js 是一个小的.快速的.现代的.相互间无依赖的图片延迟加载库.通过延迟加载图片,让图片出现在(或接近))视窗才加载来提高页面打开速度.这个库通过保持最少选项并最大化速度. 在线演示 ...
- Entity Framework加载相关实体——延迟加载Lazy Loading、贪婪加载Eager Loading、显示加载Explicit Loading
Entity Framework提供了三种加载相关实体的方法:Lazy Loading,Eager Loading和Explicit Loading.首先我们先来看一下MSDN对三种加载实体方法的定义 ...
- 前端页面优化：javascript图片延迟加载
自己写了个简单的图片延迟加载小插件. 功能如下: 页面刷新,当前屏幕图片直接加载真实地址,body被卷去的部分和下方未显示的部分的img均加载通用图片如:loding.gif 随着屏幕上下滚动加载相应 ...
- 前端优化之图片延迟加载（lazyload.js）
要想缩短首屏加载时间,思路一般是减少http请求次数和降低每次的请求量.本文中使用现成的lazyload.js插件,文末会放出下载地址. lazyload.js可以实现图片分批次加载,不是一次性加载完 ...
- 图片延时加载原理 和 使用jquery实现的一个图片延迟加载插件（含图片延迟加载原理）
图片加载技术分为:图片预加载和图片延时加载. javascript图片预加载和延时加载的区别主要体现在图片传输到客户端的时机上,都是为了提升用户体验的,延时加载又叫懒加载.两种技术的本质:两者的行为是 ...
- 利用图片延迟加载来优化页面性能（jQuery）
图片延迟加载也称懒加载,常用于页面很长,图片很多的页面,以电子商务网站居多,比如大家常上的京东,淘宝,页面以图居多,整个页面少说几百K,多则上兆,如果想一次性加载完成,不仅用户要哭了,服务器也得哭了. ...
- 你所不知道的库存超限做法 服务器一般达到多少qps比较好[转] JAVA格物致知基础篇：你所不知道的返回码 深入了解EntityFramework Core 2.1延迟加载（Lazy Loading） EntityFramework 6.x和EntityFramework Core关系映射中导航属性必须是public？ 藏在正则表达式里的陷阱 两道面试题，带你解析Java类加载机制
你所不知道的库存超限做法 在互联网企业中,限购的做法,多种多样,有的别出心裁,有的因循守旧,但是种种做法皆想达到的目的,无外乎几种,商品卖的完,系统抗的住,库存不超限.虽然短短数语,却有着说不完,道不 ...
- Lazy Load 图片延迟加载(转)
jQuery Lazy Load 图片延迟加载来源 基于 jQuery 的图片延迟加载插件,在用户滚动页面到图片之后才进行加载. 对于有较多的图片的网页,使用图片延迟加载,能有效的提高页面加载速度. ...
- jQuery Lazy Load 图片延迟加载
基于 jQuery 的图片延迟加载插件,在用户滚动页面到图片之后才进行加载. 对于有较多的图片的网页,使用图片延迟加载,能有效的提高页面加载速度. 版本: jQuery v1.4.4+ jQuery ...
随机推荐
- go语言从例子开始之Example8.数组
在 Go 中,数组 是一个固定长度的数列. package main import "fmt" func main() { 这里我们创建了一个数组 a 来存放刚好 5 个 int. ...
- Administrator 被禁用
Administrator 被禁用 问题: 重装系统后出现输入用户名和密码的情况,原因是Administrator被禁用. 解决方法: 1.开机后shift+重启 –>选择疑难解答 --> ...
- postgres服务相关语法
远程登陆 psql -h 主机 -U 用户 -p端口 -W -d 数据库 #-W表示密码,例如:psql -h 192.168.137.3 -U postgres -p 5432 -W -d post ...
- Windows下Redis安装+可视化工具Redis Desktop Manager使用
Redis是有名的NoSql数据库,一般Linux都会默认支持.但在Windows环境中,可能需要手动安装设置才能有效使用.这里就简单介绍一下Windows下Redis服务的安装方法,希望能够帮到你. ...
- php wordwrap()函数 语法
php wordwrap()函数 语法 wordwrap()函数怎么用? wordwrap()函数表示按照指定长度对字符串进行折行处理,语法是wordwrap(string,width,break,c ...
- apue 第10章 信号signal
每种信号都有名字,都是以SIG开头 信号机制最简单的接口是signal函数 #include <signal.h> typedef void (*sighandler_t)(int); s ...
- Database基础(三)：SQL数据导入/导出、 操作表记录、查询及匹配条件
一.SQL数据导入/导出 目标: 使用SQL语句完成下列导出.导入操作: 将/etc/passwd文件导入userdb库userlist表并给每条记录加编号 将userdb库userlist表中UID ...
- Network基础(二)：数制转换
一.数制转换 目标: 1)请将下列数字转换为十进制数: (110010011111)2 .(10110101110)2 2)请将下列十进制数转换为二进制: 156.2608.1043 方案: 使用按权 ...
- 通过create-react-app从零搭建react环境
一. 快速开始: 全局安装脚手架: $ npm install -g create-react-app 通过脚手架搭建项目: $ create-react-app <项目名称> 开始项目: ...
- app = Flask(__name__) 是个什么东西
"""第一部分,初始化:所有的Flask都必须创建程序实例, web服务器使用wsgi协议,把客户端所有的请求都转发给这个程序实例 程序实例是Flask的对象,一般情况下 ...