写点什么

Chrome 74 发布:可开启原生延迟加载特性

2019 年 7 月 18 日

Chrome 74发布:可开启原生延迟加载特性

Google 最近发布了 Google Chrome 74,可以通过一个实验性开关对图片和 iframe 开启原生延迟加载(代号 LazyLoad)特性。开启后,img 和 iframe 标签会有额外的 loading 属性用于配置相关资源的延迟加载行为。延迟加载不可见内容可以减少数据和内存消耗,同时加快首要内容的展示。


Chrome 74 现在支持对页面不可见区域的图片和 iframe 进行延迟加载,直到用户开始进入到指定的浏览距离。这个加载距离取决于网络速度等因素,内容通常是在刚好变成可见时完成加载。


网页设计者可以使用 img 和 iframe 标签的loading属性来控制和影响默认延迟加载行为:


  • lazy:表示这个元素适合延迟加载。

  • eager:表示这个元素不适合延迟加载,需要马上加载。

  • auto:让浏览器来决定是否需要延迟加载。当 loading 属性设置为 auto 时,相当于未设置该属性。


目前只有 Chrome 支持延迟加载特性。开发者如果需要跨平台支持该特性,需要依赖浏览器的功能检测,并使用额外的延迟加载库,例如lazySizesvanilla-lazyload。vanilla-lazyload 库作者Andrea Verlicchi在一篇博文中介绍了混合延迟加载。Chrome 团队工程经理 Addy Osmani 提供了一个示例


<!-- 正常加载这个图片 --><img src="hero.jpg" alt=".."/>

<!-- 延迟加载其他图片 --><img data-src="unicorn.jpg" loading="lazy" alt=".." class="lazyload"/><img data-src="cats.jpg" loading="lazy" alt=".." class="lazyload"/><img data-src="dogs.jpg" loading="lazy" alt=".." class="lazyload"/>

<script> if ('loading' in HTMLImageElement.prototype) { const images = document.querySelectorAll("img.lazyload"); images.forEach(img => { img.src = img.dataset.src; }); } else { // 动态引入LazySizes库 let script = document.createElement("script"); script.async = true; script.src = "https://cdnjs.cloudflare.com/ajax/libs/lazysizes/4.1.8/lazysizes.min.js"; document.body.appendChild(script); }</script>
复制代码


如果需要尝试进行延迟加载,可以进入 chrome://flags,开启允许 iframe 延迟加载(Enable lazy frame loading)和允许图片延迟加载(Enable lazy image loading)。这将会对标记了 loading="lazy"的图片和 iframe 开启延迟加载特性,同时那些标记了 loading="auto"或者没有任何 loading 属性的元素将适时进行延迟加载。


Google 已经提议将 img 和 iframe 的 loading 属性作为HTML标准的一部分。


原文链接:


Chrome 74 Natively Supports Lazy Loading


2019 年 7 月 18 日 08:007144

评论

发布
暂无评论
发现更多内容

将原则纳入到架构的生命中

soolaugust

架构 思考 设计

Java中多线程安全问题实例分析

叫练

Java 多线程 什么是多线程 多线程与高并发

住建部等六部门:广泛运用区块链等技术,建设智慧物业管理服务平台

CECBC区块链专委会

物业生活

倾斜摄影实景三维在智慧工厂 Web 3D GIS 数字孪生应用

一只数据鲸鱼

GIS 数字化 数据可视化 3D渲染 数字工厂

第13周作业

饭桶

面向全场景模块化设计 京东智联云的服务器部署有多灵活?

京东科技开发者

服务器 云主机

耗时一个月整理的97道大厂Java核心面试题出炉,精心整理,无偿分享

Java架构之路

Java 程序员 架构 面试 编程语言

一文为你详解Unique SQL原理和应用

华为云开发者社区

数据库 sql unique

即构实时音视频多中心调度设计

ZEGO即构

4年Java开发经验裸辞之后闭关修炼2个多月,成功拿下美团、京东、字节跳动(Java架构师)offer。

Java成神之路

Java 程序员 架构 面试 编程语言

我和阿里P7差的不是薪资?而是Redis+微服务+Nginx+MySQL+Tomcat

Java架构之路

Java 程序员 架构 面试 编程语言

云图说 | 云上资源管控有神器!关于IAM,你想知道的都在这里!

华为云开发者社区

服务 权限管理 iam

面试被问高并发一脸懵?那是你没看过我整理得高并发回答模板

小Q

Java 学习 面试 高并发 性能调优

好久不见!这份Spring全家桶、Docker、Redis架构大礼包免费赠送

Java架构之路

Java 程序员 架构 面试 编程语言

太赞了!滴滴开源了一套分布式ID的生成系统...

Java架构师迁哥

搭建网站/APP最全准备攻略

前嗅大数据

小程序 建站 APP发布

解析字节算法面试真题,深入探究ArrayList应用原理

小Q

Java 学习 编程 架构 面试

五年开发经验裸辞之后投递简历,收到阿里面试邀请四面成功斩获offer,特分享本次阿里面经希望对大家有所帮助。

Java成神之路

Java 程序员 架构 面试 编程语言

从源码的角度搞懂 Java 动态代理!

Java架构师迁哥

VACUUM无法从表中删除死元组的三个原因

PostgreSQLChina

数据库 postgresql

熟练掌握Spring Cloud已然成为Java工程师的面试门槛,简历上没写熟悉掌握微服务连面试机会都难得!

Java成神之路

Java 程序员 架构 面试 编程语言

什么是全场景AI计算框架MindSpore?

华为云开发者社区

人工智能 AI mindspore

为了SpringBoot提交Tomcat执行,我总结了这么多

小Q

tomcat 学习 面试 微服务 springboot

如何在数智化时代少走弯路? 这里有100个案例可以借鉴

京东科技开发者

DevOps 云原生

80%Java开发者面试都问的SpringBoot你竟不会?看完这些笔记足以

Java架构之路

Java 程序员 架构 面试 编程语言

Java进阶文档:彻底搞懂JVM+Linux+MySQL+Netty+Tomcat+并发编程

Java架构之路

Java 程序员 架构 面试 编程语言

第十三周学习总结

饭桶

云南区块链电子发票全面推广啦!

CECBC区块链专委会

区块链 纳税人

朋友突然从某度外包人员摇身一变成为大厂架构师,在我的死缠烂打下他说出了自己的秘密武器。

Java成神之路

Java 程序员 架构 面试 编程语言

《码出高效:Java 开发手册》“码” 出高效的同时编写出高质量的代“码”。PDF文档资料免费开放下载!

Java成神之路

Java 程序员 架构 面试 编程语言

一口气说出四种幂等性解决方案,面试官露出了姨母笑~

不才陈某

Java 分布式 接口

微服务架构下如何保证事务的一致性

微服务架构下如何保证事务的一致性

Chrome 74发布:可开启原生延迟加载特性-InfoQ