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的更多相关文章

  1. jQuery.lazyload使用及源码分析

    前言: 貌似以前自己也写过图片懒加载插件,但是新公司使用的是jQuery.lazyload插件,为了更好的运用,自己还是把源码看了遍,分别记录了如何使用, 插件原理,各个配置属性的完整解释,demo实 ...

  2. LazyLoad.js及scrollLoading.js

    http://blog.csdn.net/ning109314/article/details/7042829 目前图片延迟加载主要分两大块,一是触发加载(根据滚动条位置加载图片):二是自动预加载(加 ...

  3. JQuery LazyLoad实现图片延迟加载-探究

    对于大量图片的网站,图片延迟加载是提高速度和性能的好方法. 目前图片延迟加载主要分两大块,一是触发加载(根据滚动条位置加载图片):二是自动预加载(加载完首屏后n秒后自动加载其他位置的图片).大体常用的 ...

  4. JS怎样实现图片的懒加载以及jquery.lazyload.js的使用

    在项目中有时候会用到图片的延迟加载,那么延迟加载的好处是啥呢? 我觉得主要包括两点吧,第一是在包含很多大图片长页面中延迟加载图片可以加快页面加载速度:第二是帮助降低服务器负担. 下面介绍一下常用的延迟 ...

  5. 前端性能优化成神之路--图片懒加载(lazyload image)

    图片懒加载(当然不仅限于图片,还可以有视频,flash)也是一种优化前端性能的方式.使用懒加载可以想要看图片时才加载图片,而不是一次性加载所有的图片,从而在一定程度从减少服务端的请求 什么是懒加载 懒 ...

  6. [转]LazyLoad.js及scrollLoading.js

    本文转自:http://blog.csdn.net/ning109314/article/details/7042829 目前图片延迟加载主要分两大块,一是触发加载(根据滚动条位置加载图片):二是自动 ...

  7. 两种图片延迟加载的方法总结jquery.scrollLoading.js与jquery.lazyload.js

    估计网上能查到的最多的两种图片延迟加载方法就是jquery.scrollLoading.js与jquery.lazyload.js了,其中jquery.lazyload.js的调用方法因为有网友爆出的 ...

  8. 两种图片延迟加载的方法总结jquery.scrollLoading.js与jquery.lazyload.js---转载

    jquery.scrollLoading方法 html <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml& ...

  9. 图片懒加载jquery lazyload

    <script type="text/javascript" src="jquery-1.11.3.min.js"></script>& ...

随机推荐

  1. datanode无法连接到namenode

    datanode无法连接到namenode namenode在清空hadoop.tmp.dir和namenode.dir文件夹重新格式化后,datanode还是无法连接到namenode并报错: hd ...

  2. Spring Boot-日志配置(超详细)

    Spring Boot-日志配置(超详细) 更新日志: 20170810 更新通过 application.yml传递参数到 logback 中. Spring Boot-日志配置超详细 默认日志 L ...

  3. TypeScript 高级类型

    ⒈交叉类型(Intersection Types) 交叉类型是将多个类型合并为一个类型. 这让我们可以把现有的多种类型叠加到一起成为一种类型,它包含了所需的所有类型的特性. 例如, Person &a ...

  4. Mysql主从复制原理及同步延迟问题

    本文转载自:Mysql主从复制原理及同步延迟问题 主从复制解决的问题 数据分布:通过复制将数据分布到不同地理位置 负载均衡:读写分离以及将读负载到多台从库 备份:可作为实时备份 高可用性:利用主主复制 ...

  5. C++Primer 5th Chap5 Statements

    else语句对应的始终是最近的那条if语句,除非有{}强行控制,如: if(A){ if(B){/*.............*/} }else{/*.......*/}//这里else和if(A)对 ...

  6. XDebug调试

    安装 访问Xdebug 点击download 找到RELEASES,点击 custom installation instructions. 在白色框框内填入phpinfo()出来的源码 点击Anal ...

  7. 个人整理Python代码实例

    1.四位数字字母验证码的生成实例 import random if __name__ =="__main__": #四位数字字母验证码的生成 checkcode="&qu ...

  8. Neo4j查询语句总结

    最近一直在做图数据库的相关工作,对neo4j的查询语言Cypher使用较多,故在此总结记录.Cypher作为图数据库的查询语言,感觉和关系型数据库的查询语言sql差不多吧. 1.如何找到一个节点x,x ...

  9. JS OOP -03 JS类的实现

    JS类的实现: a.理解类的实现机制 b.使用prototype对象定义类成员 c.一种JS类的设计模式 a.理解类的实现机制 在JS中可以使用function关键字来定义一个类. 添加类的成员,在函 ...

  10. 【es6】es6使用集锦

    一.查找数组中是否包含某个元素  使用includes  ,返回值为布尔值 arr.includes(searchElement, fromIndex): 解析:searchElement   查询元 ...