[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 - redis学习
在学习redis之前,我们首先需要了解一下NoSQL(非关系数据库).非关系型数据库通常指数据以对象的形式存储在数据库中,而对象之间的关系通过每个对象自身的属性来决定. 为什么需要NoSQL? (1) ...
- 什么是HybridDB for MySQL (原PetaData)
云数据库HybridDB for MySQL (原名PetaData)是同时支持海量数据在线事务(OLTP)和在线分析(OLAP)的HTAP(Hybrid Transaction/Analytical ...
- lubuntu踩坑全记录
为了降低系统占用,毕业之后一直用lubuntu不用ubuntu...操作其实差不多,就是lubuntu有一些小坑坑:P 本文是我的踩坑全记录.长期更新. 调分辨率 升级命令lubuntu不出登录页面 ...
- msql 数据类型
1.数据类型 #1. 数字: 整型:tinyinit int bigint 小数: float :在位数比较短的情况下不精准 double :在位数比较长的情况下不精准 0.0000012301231 ...
- 利用Python进行数据分析_Pandas_基本功能
申明:本系列文章是自己在学习<利用Python进行数据分析>这本书的过程中,为了方便后期自己巩固知识而整理. 第一 重新索引 Series的reindex方法 In [15]: obj = ...
- tuxedo10g3R的安装过程（原文url：http://www.cnblogs.com/xianfish/articles/1955244.html）
RHEL 5.1 32Bit 安装配置TUXEDO 10R3 [前言]: 目的: 在Linux上安装配置Tuxedo 10R3 环境: RHEL 5.1 32Bit [前提条件]: 下载Tuxed ...
- 时间格式_java
@Test public void testDate(){ Date date=new Date(); System.out.println(date); /*日期格式*/ DateFormat df ...
- PHP关于VC11,VC9,VC6以及Thread Safe和Non Thread Safe版本选择的问题
这里是我在搭建php环境时收集的资料供大家参考: 现在PHP官网上下载PHP安装包都有VC11或VC9的字样,这是什么含义,我们应该下载哪种安装包更好呢?其实PHP官网给出了答案: VC6版本是使用V ...
- AngularJS视图 ng-view
AngularJS支持通过在单个页面上的多个视图的单页应用.要做到这一点AngularJS提供ng-view 和 ng-template指令,以及 $routeProvider 服务. ng-view ...
- Asp.Net Core 轻松学系列-4玩转配置文件
目录 前言 另类方式使用 hosting.json 使程序运行于多个端口 结语 前言 在 .NET Core 项目中,配置文件有着举足轻重的地位:与.NetFramework 不同的是,.NE ...