[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 ...
随机推荐
- Go基础编程实践(九)—— 网络编程
下载网页 package main import ( "io/ioutil" "net/http" "fmt" ) func main() ...
- C#泛型集合之——链表
链表基础 1.概述:C#中泛型集合中的链表—LinkedList 是一个双向链表,其结点为LinkedListNode 结构 其中,结点结构包含:Next,Previous,Value三部分.且结点中 ...
- 4.matplotlib绘制直方图
  # coding=utf-8 from matplotlib import pyplot as plt from matplotlib import font_manager a=[131, ...
- 矩量母函数(Moment Generating Function,mgf,又称:动差生成函数)
在统计学中,矩又被称为动差(Moment).矩量母函数(Moment Generating Function,简称mgf)又被称为动差生成函数. 称exp(tξ)的数学期望为随机变量ξ的矩量母函数,记 ...
- flask 与 SQLAlchemy的使用
flask 与 SQLAlchemy的使用 安装模块 pip install flask-sqlalchemy 在单个python中与flask使用 # 文件名:manage.py from flas ...
- PE系统——安装教程
本教程使用到的软件我会在本文末给出,若失效了请私信我,重新上传. 1.安装PE系统前,把U盘插在电脑上(如果你需要安装Windows10系统,请插入一个容量至少8G的U盘).当然容量最好是32—64G ...
- pandas-10 pd.pivot_table()透视表功能
pandas-10 pd.pivot_table()透视表功能 和excel一样,pandas也有一个透视表的功能,具体demo如下: import numpy as np import pandas ...
- JavaWeb 之 MVC 开发模式
MVC 开发模式 一.JSP 演变历史 1. 早期只有servlet,只能使用response输出标签数据,非常麻烦 2. 后来又jsp,简化了Servlet的开发,如果过度使用jsp,在jsp中即写 ...
- jetbrains全家桶激活
56ZS5PQ1RF-eyJsaWNlbnNlSWQiOiI1NlpTNVBRMVJGIiwibGljZW5zZWVOYW1lIjoi5q2j54mI5o6I5p2DIC4iLCJhc3NpZ25lZ ...
- Linux E667 同步失败
在使用Vim编辑/proc目录下的文件后,保存,显示"E667 同步失败" 原因 因为proc这个目录是一个虚拟文件系统,它放置的数据都是在内存中,本身不占有磁盘空间,所以使用Vi ...