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. 分布式缓存 - hash环/一致性hash

    一 引言 当前memcached,redis这类分布式kv缓存已经非常普遍.我们知道memcached的分布式其实是一种"伪分布式",也就是它的服务器节点之间其实是无关联的,之间没 ...

  2. python学习-47 random模块

    random模块 随机模块 random 的方法: print(random.random()) # [0,1] 的浮点数 print(random.randint(1,3)) print(rando ...

  3. js — 字符串

    目录 1. 拼接字符串 2. 获取字符的方法 3. 字符串操作方法(切片) 4. 字符串位置方法 - 索引 5. trim()方法 6. 字符串大小写转换方法 字符串 typeof 用于校验当前变量的 ...

  4. 处理bugs心法

    1. 前提 第一层:遇到异常首先必须告诉自己,冷静,不要慌.(一看到Bug就心慌,那么武功就施展不了了) 2. 入门级 第二层:遇到Bug,第一潜意识看输出异常的信息的(控制台输出,Junit输出,页 ...

  5. AtCoder Grand Contest 040 A - ><

    传送门 对于某个位置,只要知道这个位置往左最多的连续 $\text{<}$ 的数量 $x$ 和往右最多的连续 $\text{>}$ 的数量 $y$ 那么这个位置最小可能的数即为 $max( ...

  6. Tomcat与WAS应用中间件差异化分析研究

    --转载 http://blog.chinaunix.net/uid-25723371-id-5759072.html 目前我们在使用的基于JAVA的提供逻辑展现应用中间件有两种,一种是以商用软件WA ...

  7. Java 中的锁原理、锁优化、CAS、AQS 详解！

    来源:jianshu.com/p/e674ee68fd3f 1.为什么要用锁? 锁-是为了解决并发操作引起的脏读.数据不一致的问题. 2.锁实现的基本原理 2.1.volatile Java编程语言允 ...

  8. PL/SQL Developer的错误提示弹框的文本显示乱码问题

    问题:Windows中文环境下,PL/SQL Developer的错误提示弹框文本为乱码,如下: 解决过程:1.使用SELECT * FROM v$nls_parameters;查询得知服务器的字符集 ...

  9. Visual Studio 开发大量 JavaScript 代码项目程序崩溃的解决方案

    最近公司做新项目,基于 Bootstrap.AngularJS 和 kendo 开发一套后台的管理系统,在项目中使用了大量的 JavaScript 文件,这两天 Visual Studio 2015 ...

  10. c#基础知识梳理（二）

    上期回顾 - https://www.cnblogs.com/liu-jinxin/p/10818256.html 一.变量 一个变量只不过是一个供程序操作的存储区的名字.在 C# 中,每个变量都有一 ...