图片懒加载从简单到复杂
全栈前端精选
共 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
评论
了解加密货币到加密货币的互换
1、什么是加密货币互换?加密货币到加密货币的互换是指以现行市场汇率将一种加密货币直接兑换为另一种加密货币。与需要法定货币存款和较长流程的传统交易所不同,加密货币到加密货币的互换可以无缝地促进交换。掉期在提高加密货币的流动性和效率方面发挥着重要作用。该功能使用户能够将他们的加密货币与钱包中的其他代币进
区块链头条
0
美团社招一面,比预想的简单。
面试题大全:www.javacn.site面试这件事就很玄学,有时候你觉得他可能很难,但面完之后竟然出奇的顺利,问的问题你都会;有些你觉得这次面试应该很简单,但去了之后就被问懵了,所以面试这件事有很多一部分运气的成分。所以说,在没有 Offer 之前就是多准备、楞怂面,主打一个大力出奇迹。这不,逛牛
Java中文社群
0
零售业降本增效的新举措:从卖场的能耗入手
导语:对于超市企业来讲,通过节能灯具减少40%以上照明电费,是切实可行的节流方案之一。商超节能,势在必行!零售企业的降本增效从何入手?它们更需要怎样的创新产品与照明解决方案?广东富兴商超照明有限公司总经理唐京飘在第二十届全国连锁商业发展战略论坛上,与大家分享了“如何用科技创新推动超市节能”的主题演讲
联商网资讯
0
某程序员吐槽:公司最近招了一批35左右的,这帮人习惯天天卷到八点多,导致现在我们也要八点才下班
架构师大咖
架构师大咖,打造有价值的架构师交流平台。分享架构师干货、教程、课程、资讯。架构师大咖,每日推送。
公众号该公众号已被封禁某位程序员的吐槽引发了广泛的思考和共鸣。他抱怨公司
源码共读
0
江苏省人民医院外科党总支专家团队到盱眙县人民医院开展惠民医疗活动
党建引领聚合力,共建交流惠民生。4月20日,江苏省人民医院外科党总支专家团队走进盱眙县人民医院开展党建主题活动。江苏省人民医院外科党总支书记、大外科副主任杨力,大外科主任吴延虎,盱眙县人民医院院长干文武出席座谈交流会并讲话,盱眙县人民医院党委委员、副院长刘新亮主持了活动。杨力说,江苏省人民医院和盱眙
盱眙老妹
0
惹到雷军,智己惨了
作为上汽集团品牌向上的“双翼战略”,智己汽车与飞凡汽车的价格接连下探,被迫与小米汽车同台竞争。可在热度与销量上,三者相形见绌。2023年,智己和飞凡销量累计约6万台;2024年3月28日,小米汽车上市27分钟大定破5万。老实巴交的车二代眼馋营销高手小米的热度,于是做了一场照猫画虎的“致敬”。不成想却
亿欧网
0
大视频周报|全国酒店电视操作复杂专项治理动员部署电视电话会在京召开
小美播报本 期 看 点广电总局发4K超高清机顶盒技术新标准;总局公示《智能电视操作系统 第8部分:分类分级》等两项行业标准;工信部组织开展今年5G轻量化(RedCap)贯通行动;全国酒店电视操作复杂专项治理动员部署电视电话会在京召开......(今日流媒体vip可免费获取报告PDF版,详情请见文末。
流媒体网
0
Redis 是怎么从单体架构发展到分布式缓存的?
图解学习网站:https://xiaolincoding.comRedis 架构是如何一步一步发展到今天的样子的?2010 年 - 单体 RedisRedis 1.0 于 2010 年发布,当时的架构非常简单。它通常用作业务应用程序的缓存。不过,Redis 将数据存储在内存中。当我们重启 Redis
小林coding
10