[HTML5] Native lazy-loading for the web
According to HTTPArchive, images are the most requested asset type for most websites and usually take up more bandwidth than any other resource. At the 90th percentile, sites send about 4.7 MB of images on desktop and mobile.
Currently, there are two ways to defer the loading of off-screen images and iframes:
- Using the Intersection Observer API [See example]
- Using
scroll
,resize
, ororientationchange
event handlers
In Chrome 76, you can use the loading
attribute to completely defer the loading of offscreen images and iframes that can be reached by scrolling:
<img src="data:image.png" loading="lazy" alt="…" width="200" height="200">
<iframe src="https://example.com" loading="lazy"></iframe>
auto
: Default lazy-loading behavior of the browser, which is the same as not including the attribute.lazy
: Defer loading of the resource until it reaches a calculated distance from the viewport.eager
: Load the resource immediately, regardless of where it's located on the page.
The feature will continue to be updated until it's launched in a stable release (Chrome 76 at the earliest). But you can try it out by enabling the following flags in Chrome:
chrome://flags/#enable-lazy-image-loading
Notice: In order to make sure the good user experience, recommend to add the size info for the image:
<img src="..." loading="lazy" width="200" height="200">
<img src="..." loading="lazy" style="height:200px; width:200px;">
[HTML5] Native lazy-loading for the web的更多相关文章
- Lazyr.js – 延迟加载图片(Lazy Loading)
Lazyr.js 是一个小的.快速的.现代的.相互间无依赖的图片延迟加载库.通过延迟加载图片,让图片出现在(或接近))视窗才加载来提高页面打开速度.这个库通过保持最少选项并最大化速度. 在线演示 ...
- [AngularJS] Lazy loading Angular modules with ocLazyLoad
With the ocLazyLoad you can load AngularJS modules on demand. This is very handy for runtime loading ...
- WPF/SL: lazy loading TreeView
Posted on January 25, 2012 by Matthieu MEZIL 01/26/2012: Code update Imagine the following scenario: ...
- 你所不知道的库存超限做法 服务器一般达到多少qps比较好[转] JAVA格物致知基础篇:你所不知道的返回码 深入了解EntityFramework Core 2.1延迟加载(Lazy Loading) EntityFramework 6.x和EntityFramework Core关系映射中导航属性必须是public? 藏在正则表达式里的陷阱 两道面试题,带你解析Java类加载机制
你所不知道的库存超限做法 在互联网企业中,限购的做法,多种多样,有的别出心裁,有的因循守旧,但是种种做法皆想达到的目的,无外乎几种,商品卖的完,系统抗的住,库存不超限.虽然短短数语,却有着说不完,道不 ...
- 001_Chrome 76支持原生HTML 图片懒加载Lazy loading
Table Of Content 什么是懒加载? 语法参数及使用方式? 有哪些特点? 与js有关的实践 什么是懒加载? 技术背景 Web应用需要经常向后台服务器请求资源(通过查询数据库,是非常耗时耗资 ...
- HTML5探秘:用requestAnimationFrame优化Web动画
本文转载自: HTML5探秘:用requestAnimationFrame优化Web动画
- Angular2+typescript+webpack2(支持aot, tree shaking, lazy loading)
概述 Angular2官方推荐的应该是使用systemjs加载, 但是当我使用到它的tree shaking的时候,发现如果使用systemjs+rollup,只能打包成一个文件,然后lazy loa ...
- Can you explain Lazy Loading?
Introduction Lazy loading is a concept where we delay the loading of the object until the point wher ...
- [AngularJS] Lazy Loading modules with ui-router and ocLazyLoad
We've looked at lazy loading with ocLazyLoad previously, but what if we are using ui-router and want ...
- iOS swift lazy loading
Why bother lazy loading and purging pages, you ask? Well, in this example, it won't matter too much ...
随机推荐
- C++之开灯问题(链表)
有n盏灯,编号为1~n.第1个人把所有灯打开,第2个人按下所有编号为2的倍数开关(这些灯将被关掉),第3个人按下所有编号为3的倍数的开关,以此类推.一共有k个人,问最后有哪些灯开着?输入n和k,输出开 ...
- 递归实现全排列python
python递归实现"abcd"字符串全排列 1.保持a不动,动bcd 2.保持b不动,动cd 3.保持c不动,动d def pailie(head="",st ...
- Python输出菱形
最近准备熟悉下Python的基础语法,准备练习下输出菱形.刚好作为自己blog的开篇~~ n =10 #控制菱形的大小 for i in range(1, n): for j in range(int ...
- 小程序canvas绘制base64数据格式图片
翻了微信小程序官方文档,看了看画板drawImage的用法,官方对所要绘制的图片资源路径并没有很详细,模棱两可,没说支持什么格式的路径.今天我就试一下支不支持base64格式的图片 随便找张图片从网上 ...
- IDEA远程调试Ambari Server
1.配置端口 Ambari Server默认配置了服务端的debug参数,端口为5005.如果要修改端口,可以在/usr/sbin/ambari_server_main.py文件中对应地方修改,直接改 ...
- java之mybatis之使用mybatis实现crud操作
目录结构: 1.封装 mybatis 的工具类: MybatisUtil.java public class MybatisUtil { private static SqlSessionFactor ...
- 【WEB基础】HTML & CSS 基础入门(2)选取工具:VS2019安装使用
前面 子曰“工欲善其事,必先利其器”.开始编写HTML代码前,我们该选择一款编辑工具,实际上,HTML作为标记语言,我们甚至可以直接用记事本来编写HTML代码,但记事本实在弱爆了.这里推荐使用Visu ...
- Python进阶----类的结构(公有成员 , 私有成员(私有属性,私有方法),类方法,静态方法,属性) ,isinstance 和issubcalss ,元类(type())
Python进阶----类的结构(公有成员 , 私有成员(私有属性,私有方法),类方法,静态方法,属性) ,isinstance 和issubcalss ,元类(type()) 一丶类的结构细分 ...
- pandas-03 DataFrame()中的iloc和loc用法
pandas-03 DataFrame()中的iloc和loc用法 简单的说: iloc,即index locate 用index索引进行定位,所以参数是整型,如:df.iloc[10:20, 3:5 ...
- JAVA基础之DBUtils与连接池
利用DBUtils进一步简化JDBC数据库的增删改查的代码,同时利用从连接池中接取连接,进而进行简化和减少资源的消耗! 一.DBUtils: 1.DBUtils就是JDBC的简化开发工具包.需要项目导 ...