图片懒加载从简单到复杂
全栈前端精选
共 3978字,需浏览 8分钟
· 2020-11-25
(给全栈前端精选加星标,提升前端技能)
作者:hateonion
https://hateonion.me/posts/19jan30/
为什么要做图片的懒加载
图片懒加载的原理
图片懒加载的简单实现
// index.css
img[src] {
filter: blur(0.2em);
}
img {
filter: blur(0em);
transition: filter 0.5s;
}
(function lazyLoad(){
const imageToLazy = document.querySelectorAll('img[src]');
const loadImage = function (image) {
image.setAttribute('src', image.getAttribute('src'));
image.addEventListener('load', function() {
image.removeAttribute("src");
})
}
imageToLazy.forEach(function(image){
loadImage(image);
})
})()
图片懒加载的进阶实现–滚动加载
(function lazyLoad(){
const imageToLazy = document.querySelectorAll('img[src]');
const loadImage = function (image) {
image.setAttribute('src', image.getAttribute('src'));
image.addEventListener('load', function() {
image.removeAttribute("src");
})
}
const intersectionObserver = new IntersectionObserver(function(items, observer) {
items.forEach(function(item) {
if(item.isIntersecting) {
loadImage(item.target);
observer.unobserve(item.target);
}
});
});
imageToLazy.forEach(function(image){
intersectionObserver.observe(image);
})
})()
如何选择合适的Placeholder图片
图片尺寸已知
图片尺寸未知
懒加载防止布局抖动
.lazy-load__container{
position: relative;
display: block;
height: 0;
}
.lazy-load__container.feature {
// feature image 的高宽比设置成42.8%
// 对于其他图片 比如 post图片,高宽比可能会不同,可以使用其他css class去设置
padding-bottom: 42.8%;
}
.lazy-load__container img {
position: absolute;
top:0;
left:0;
height: 100%;
width: 100%;
}
像Medium一样懒加载图片
使用 aspect ratio box 创建占位元素。 在html解析时只加载一个小尺寸的图片,并且添加blur效果。 最后使用js选择性的加载真实图片。
总结
懒加载用户当前视窗中的图片可以提升页面的加载性能。 懒加载的思路是在html解析时先加载一个placeholder图片,最后再用js选择性的加载真实图片。 如果需要滚动加载可以使用 Intersection Observer 。 对于固定尺寸和不定尺寸的图片,我们可以选择不同的服务去或者placeholder图片。 对于图片尺寸不确定引起的布局抖动问题我们可以使用 aspect ratio box 来解决。
参考资料
Progressive Loading Lazy loading with responsive images and unknown height Simple image placeholders for lazy loading images How Medium does progressive image loading Sizing Fluid Image Containers with a Little CSS Padding Hack
评论
从原理到实践:掌握DPDK内存池技术
前言:本文整理下之前的学习笔记,基于DPDK17.11版本源码分析。主要分析一下内存管理部分代码。一、概述内存管理是数据面开发套件(DPDK)的一个核心部分,以此为基础,DPDK的其他部分和用户应用得以发挥其最佳性能。本系列文章将详细介绍DPDK提供的各种内存管理的功能。但在此之前,有必要先谈一谈为
开源Linux
0
好未来测开一面,挺简单!(0428面试原题解析)
大家好,我是二哥呀。今天继续给大家分享春招面试题《好未来测开一面原题》,附详细答案,我会用通俗易懂+手绘图的方式,让天下所有的面渣都能逆袭 😁二哥的 Java 面试指南内容较长,建议正在冲刺 24 届春招和 25 届暑期实习、秋招的同学先收藏起来,面试的时候大概率会碰到,1、二哥的 Linux 速查
沉默王二
0
SpringBoot 实现图片防盗链功能
程序员的成长之路互联网/程序员/技术/资料共享 关注阅读本文大概需要 4 分钟。来自:blog.csdn.net/weixin_46157208/article/details/138051737前言出于安全考虑,我们需要后端返回的图片只允许在某个网站内展示,不想被爬虫拿到图片地
程序员的成长之路
0
学习开放日:开放复杂科学、AI+X 海量学习资源!
Datawhale干货 学习开放日:4月27-28日1. 什么是学习开放日?以AI为代表的技术突飞猛进,人类知识森林快速扩张,仅凭一人之力不仅难以覆盖,更是难以串联知识线索。唯有像蚂蚁探索最优路径一样,我们才能在信息爆炸的知识森林中探索出更好的方向!因此,今年集智斑图联合国内最
Datawhale
1
了解加密货币到加密货币的互换
1、什么是加密货币互换?加密货币到加密货币的互换是指以现行市场汇率将一种加密货币直接兑换为另一种加密货币。与需要法定货币存款和较长流程的传统交易所不同,加密货币到加密货币的互换可以无缝地促进交换。掉期在提高加密货币的流动性和效率方面发挥着重要作用。该功能使用户能够将他们的加密货币与钱包中的其他代币进
区块链头条
0
阿里P6,年薪50W+,女朋友父母死活不同意,去年上岸公务员,月薪4k,不料她爸妈却主动邀请到家里吃饭,特别热情主动
上一篇:人到中年, 发现同学间差距了,学医的高薪且稳定,进国企的工资不高但稳定,考公的工资不高,却生活滋润在任何时代,与国家有关的总是受到青睐。如果能够担任公职,那么在社会上就会受到极高的尊敬。近年来,"成为体制内的一员"已经逐渐成为许多年轻人的职业追求。无论是公务员、事业单位员工还是教师,他们不再
开发者全社区
0
1000Mbps换算成MB/s是多少?除以8?想简单了!
原文链接:https://post.smzdm.com/p/azoqenzp/在网络传输的时候,往往会用到Mbps这个单位,GbE or 1 GigE 的网卡现在很流行,这个东西被大家叫做“千兆网卡”。同时,大家特别习惯用GB或者MB来描述一个磁盘的大小。这个叫做Gigabyte或者Megabyte
测试开发技术
0
Java与lua互相调用简单教程
来源:网络👉 欢迎加入小哈的星球 ,你将获得: 专属的项目实战 / Java 学习路线 / 一对一提问 / 学习打卡 / 赠书福利全栈前后端分离博客项目 2.0 版本完结啦, 演示链接:http://116.62.199.48/ ,新项目
小哈学Java
0