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. java输入输出 -- I/O模型简述

    一.简介 本文向大家介绍五种I/O模型.分别是阻塞I/O.非阻塞I/O.I/O复用.信号驱动式I/O.异步I/O等.内容参考<UNIX网络编程>,大家想进深入学习网络编程,建议去读读这本书 ...

  2. 将 MathType 公式转换为 Word 自带公式

    以下操作是基于Office 365以及MathType 6.9b平台.有网友留言说第四步没出现「转换为 Office Math」选项,这个我就不清楚了,难道是只有Office 365才支持? 打开Ma ...

  3. 2019ICPC南昌网络赛总结

    打的很崩的一场比赛.上来签到题我就wa了一发,感觉在梦游.然后我开了H题,队友开B题,f(n)=3f(n-1)+2f(n)傻子都知道矩阵快速幂,但是1e7的强制在线必须把logn优化,然后试图打表寻找 ...

  4. WUSTOJ 1277: 小吉吉读书（Java）

    1277: 小吉吉读书 题目   有一本 n 页的书,每天都看 ai 页,已知星期 k 买的书,问星期几能看完?更多内容点击标题. 分析   统计出一个星期能看 a 页,看了 a 页又会回到买书的那一 ...

  5. T100——错误信息提示传入参数显示

    LET l_str1 = l_xccc.xccc901LET l_str2 = l_inat015LET l_str = l_str1.trim(),'|',l_str2.trim() CALL cl ...

  6. c# asp.net 实现分页(pager)功能

    分页PagerHelper辅助类 using System;using System.Web; public class PagerHelper { #region 获取分页的Html代码 /// & ...

  7. Java Web 深入分析（8） Servlet工作原理解析

    Servlet Servlet(Server Applet)是Java Servlet的简称,称为小服务程序或服务连接器,用Java编写的服务器端程序,主要功能在于交互式地浏览和修改数据,生成动态We ...

  8. Python多个装饰器的顺序 转载

    3.使用两个装饰器当一个装饰器不够用的话,我们就可以用两个装饰器,当然理解起来也就更复杂了,当使用两个装饰器的话,首先将函数与内层装饰器结合然后在与外层装饰器相结合,要理解@语法的时候到底执行了什么, ...

  9. VBA常量（八）

    常量是一个命名的内存位置,用于保存脚本执行期间固定(无法更改)的值.如果用户试图更改常量值,则脚本执行结束时会出现错误.常量声明与声明变量相同. 以下是命名常量的规则 - 常量名称必须使用一个字母作为 ...

  10. Mac下安装和配置Vue项目

    题记:学vue有一段时间了,终于今天下定决心每日书写一篇学习笔记.1.访问node.js官网:https://nodejs.org/en/ 下载对应安装包.2.安装完成,在终端输入 : node -v ...