[HTML5] Lazyload below the fold images and iframes with native browser lazy-loading
In this lesson, you'll learn how to use the loading="lazy" attribute available on images and iframes to lazily load below the fold images, which saves bandwidth and increases the load time performance of web pages. You'll also learn how to prevent images from lazy loading if necessary, and how to add lazy loading to responsive images as well. Lazy loading is supported in Chrome 76, and will be available in the next version of Edge and has public signals of support from Firefox, and Safari as well.
<!DOCTYPE html>
<style>
img {
border: 1px solid black;
display: block;
width: 400px;
height: 1000px;
}
</style>
<img loading="lazy" src="https://via.placeholder.com/400x1000"/>
<img loading="lazy" src="https://via.placeholder.com/400x1001"/>
<img loading="lazy" src="https://via.placeholder.com/400x1002"/>
<img loading="lazy" src="https://via.placeholder.com/400x1003"/>
<picture>
<source media="(min-width: 100px)" srcset="https://via.placeholder.com/1200x3000">
<img loading="lazy" src="https://via.placeholder.com/400x1004"/>
</picture>
<img loading="lazy"
srcset="https://via.placeholder.com/400x1005 400w, https://via.placeholder.com/800x2010 800w"/>
<iframe loading="lazy" src="http://example.com" width="400" height="400"></iframe>
[HTML5] Lazyload below the fold images and iframes with native browser lazy-loading的更多相关文章
- jQuery.lazyload使用及源码分析
前言: 貌似以前自己也写过图片懒加载插件,但是新公司使用的是jQuery.lazyload插件,为了更好的运用,自己还是把源码看了遍,分别记录了如何使用, 插件原理,各个配置属性的完整解释,demo实 ...
- LazyLoad.js及scrollLoading.js
http://blog.csdn.net/ning109314/article/details/7042829 目前图片延迟加载主要分两大块,一是触发加载(根据滚动条位置加载图片):二是自动预加载(加 ...
- JQuery LazyLoad实现图片延迟加载-探究
对于大量图片的网站,图片延迟加载是提高速度和性能的好方法. 目前图片延迟加载主要分两大块,一是触发加载(根据滚动条位置加载图片):二是自动预加载(加载完首屏后n秒后自动加载其他位置的图片).大体常用的 ...
- JS怎样实现图片的懒加载以及jquery.lazyload.js的使用
在项目中有时候会用到图片的延迟加载,那么延迟加载的好处是啥呢? 我觉得主要包括两点吧,第一是在包含很多大图片长页面中延迟加载图片可以加快页面加载速度:第二是帮助降低服务器负担. 下面介绍一下常用的延迟 ...
- 前端性能优化成神之路--图片懒加载(lazyload image)
图片懒加载(当然不仅限于图片,还可以有视频,flash)也是一种优化前端性能的方式.使用懒加载可以想要看图片时才加载图片,而不是一次性加载所有的图片,从而在一定程度从减少服务端的请求 什么是懒加载 懒 ...
- [转]LazyLoad.js及scrollLoading.js
本文转自:http://blog.csdn.net/ning109314/article/details/7042829 目前图片延迟加载主要分两大块,一是触发加载(根据滚动条位置加载图片):二是自动 ...
- 两种图片延迟加载的方法总结jquery.scrollLoading.js与jquery.lazyload.js
估计网上能查到的最多的两种图片延迟加载方法就是jquery.scrollLoading.js与jquery.lazyload.js了,其中jquery.lazyload.js的调用方法因为有网友爆出的 ...
- 两种图片延迟加载的方法总结jquery.scrollLoading.js与jquery.lazyload.js---转载
jquery.scrollLoading方法 html <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml& ...
- 图片懒加载jquery lazyload
<script type="text/javascript" src="jquery-1.11.3.min.js"></script>& ...
随机推荐
- Java中的静态导入
Java从1.5开始,增加了静态导入的语法,静态导入使用import static语句,分为两种: 导入指定类的某个静态成员变量.方法. 导入指定类的全部的静态成员变量.方法. 下面是代码演示: /* ...
- python并发编程之多线程（实践篇）
一.threading模块介绍 官网链接:https://docs.python.org/3/library/threading.html?highlight=threading# 1.开启线程的两种 ...
- python学习-15 基本数据类型4
1.range a = range(0 ,100 , 5) #创建>=0,<100的连续数字,步长为5 for b in a: print(b) 运算结果: 0 5 10 15 20 25 ...
- scratch少儿编程第一季——06、人在江湖混，没有背景怎么行。
各位小伙伴大家好: 到上期我们学习了动作模块的全部指令.接下我们用动作模块做一个小小项目,来总结我们前面学的内容. 在做项目之前我们先来换一个背景. 在左下角舞台区,点击打开背景库,选择自己所需要的背 ...
- SAS学习笔记29 logistic回归
变量筛选 当对多个自变量建立logistic回归模型时,并不是每一个自变量对模型都有贡献.通常我们希望所建立的模型将具有统计学意义的自变量都包含在内,而将没有统计学意义的自变量排除在外,即进行变量筛选 ...
- Binary Table CodeForces - 662C (FWT)
大意: 给定$nm$大小的$01$矩阵, $1\le n\le 20,1\le m\le 1e5$, 可以任选行列翻转, 求最终$1$总数最少为多少. 显然有$O(m2^n)$的暴力算法 也就是枚举翻 ...
- MySQL AND 和 OR 联合使用带来的坑
MySQL 基础篇 三范式 MySQL 军规 MySQL 配置 MySQL 用户管理和权限设置 MySQL 常用函数介绍 MySQL 字段类型介绍 MySQL 多列排序 MySQL 行转列 列转行 M ...
- hdu 2844 多重背包的转化问题 以及这个dp状态的确定
在杭电上测试了下 这里的状态转移方程有两个.,. 现在有价值val[1],val[2],…val[n]的n种硬币, 它们的数量分别为num[i]个. 然后给你一个m, 问你区间[1,m]内的所有数目, ...
- CAS 5.x搭建常见问题系列(2).PKIX path building failed
错误原因 服务端的证书是不安全的,Cas的客户端在调用时因为安全提醒造成调用失败. CAS的客户端需要导入服务端的证书后,就正常了. 具体操作步骤如下: 1. 首先启动tomcat,看下之前搭建的ca ...
- Sqlserver查询每组数据中最大的一条数据
select * from ( SELECT ROW_NUMBER() over (PARTITION By name order by val) as rowId,tb_test.* FROM tb ...