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. 《Mysql - 事务 MVCC》

    一:前言 - 前面通过 <Mysql 事务 - 隔离> 的学习,知道了事务的实现,是根据 获取一致性视图 来实现的. 二:那么,什么时候会获取到一致性视图呢? - 例如:有三个事务,启动的 ...

  2. 关于Django ModelForm渲染时间格式问题

    关于Django ModelForm渲染时间格式问题 直接定义DateTimeInput或者DateTimeFile是不行的,渲染在html页面中的仍然是Input text类型 解决办法:自定义小部 ...

  3. go 实现每次生成不同随机值

    直接使用rand.Intn(10) 多次运行发现每次的随机值都是一样的 查看 Intn方法的源码说明 // Intn returns, as an int, a non-negative pseudo ...

  4. 无法访问VMWARE虚拟机中linux的nginx地址

    取得root权限,然后在centos(6.5)中关闭防火墙: service iptables stop 关闭后在windows 10 中浏览器通过虚拟机的ip地址可以直接访问了. 经过测试,打开ip ...

  5. SQL Server 2017命令创建新账户（test-user），并分配数据库权限

    -- 1. 创建登录账号USE [master];GOCREATE LOGIN [test-user] WITH PASSWORD = 'xysu7SZ193SNX6E{{HxubPE3}vr',DE ...

  6. js判断是哪种浏览器和阻止页面加载

    <html> <head> <meta http-equiv="Content-Type" content="text/html; char ...

  7. Deep Learning方向的paper

    转载 http://hi.baidu.com/chb_seaok/item/6307c0d0363170e73cc2cb65 个人阅读的Deep Learning方向的paper整理,分了几部分吧,但 ...

  8. 恺撒密码 I

    恺撒密码 I ‪‬‪‬‪‬‪‬‪‬‮‬‪‬‭‬‪‬‪‬‪‬‪‬‪‬‮‬‪‬‫‬‪‬‪‬‪‬‪‬‪‬‮‬‫‬‪‬‪‬‪‬‪‬‪‬‪‬‮‬‪‬‪‬‪‬‪‬‪‬‪‬‪‬‮‬‪‬‪‬‪‬‪‬‪‬‪‬‪‬‮‬‭ ...

  9. 什么是实体关系图（ERD）？ 转

    https://www.visual-paradigm.com/cn/guide/data-modeling/what-is-entity-relationship-diagram/#erd-data ...

  10. Java 面向对象（一）面向对象思想

    一.面向对象思想 1.概述 Java语言是一种面向对象的程序设计语言,而面向对象思想是一种程序设计思想,我们在面向对象思想的指引下,使用Java语言去设计.开发计算机程序. 这里的对象泛指现实中一切事 ...