[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 ...
随机推荐
- CSS3弹性盒布局方式
一.CSS3弹性盒子 弹性盒子是CSS3的一种新布局模式. CSS3 弹性盒( Flexible Box 或 flexbox),是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的 ...
- Locust性能测试-no-web模式和csv报告保存 转自:悠悠
前言 前面是在web页面操作,需要手动的点start启动,结束的时候也需要手工去点stop,没法自定义运行时间,这就不太方便. locust提供了命令行运行的方法,不启动web页面也能运行,这就是no ...
- 【题解】Luogu P5340 [TJOI2019]大中锋的游乐场
原题传送门 没想到省选也会出这种题??! 实际就是一个带有限制的最短路 因为\(k<=10\),所以我们珂以暴力将每个点的权值分为[-k,k],为了方便我们珂以转化成[0,2k],将汉堡的权值记 ...
- [洛谷P4385][COCI2009]Dvapravca(咕咕咕)
题目大意:很早以前做的题 题解: 卡点: C++ Code: #pragma GCC optimize("Ofast") #pragma GCC optimize("un ...
- ELK学习笔记之使用curl命令操作elasticsearch
0x00 _cat系列 _cat系列提供了一系列查询elasticsearch集群状态的接口.你可以通过执行curl -XGET localhost:9200/_cat 1. 获取所有_cat系列的操 ...
- nrm的安装和使用
1.安装nodejs,下载地址,http://nodejs.cn/download/,安装过程直接点击下一步即可 安装完成后cmd输入npm -v 查看当前安装的npm的版本,如下图提示所示则表示安装 ...
- Hibernate的关联映射--一对多、
这是我 1 单向一对多: 实体类:(课程类)Grade与(学生类)Student的一对多关系 学生类: public class Student implements java.io.Serializ ...
- 采用__call__ 实现装饰器模式
装饰器模式在实现中也是很常见的:比如手机贴膜,手机壳 都是为了给手机增加一些额外功能 增加耐操 装饰器模式的本质就是对对象二次包装,赋额外功能 __call__ __call__是python魔术方法 ...
- vue学习(1) vue-cli 项目搭建
vue学习(1) vue-cli 项目搭建 一.windows环境 1. 下载node.js安装包 官网:https://nodejs.org/en/download/ 选择LTS下载 2. 安装 ...
- koa2--nodemailer实现邮箱验证
依赖包安装: /** * koa-bodyparser用于把formData数据解析到ctx.request.body * 通过ctx.request.body访问请求的参数 * koa-redis用 ...