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日志框架系列(5):logback框架appender详解

    1.appender 1.什么是appender Appender 是负责写记录事件的组件. Appender 必须实现接口“ch.qos.logback.core.Appender”.该接口的重要方 ...

  2. VS2010 MFC的按钮风格改变

    改变VS2010 MFC的按钮风格 VS2010建的MFC工程按钮默认的风格类似VC6.0(直角矩形),如想美观按钮改为WIN7的按钮风格(圆角矩形),只需在代码中找到头文件"stdafx. ...

  3. JS 定时器/延时器

    定时器 创建定时器    window.setInterval(方法类型,间隔时间(1000=1秒)) var timer=window.setInterval(func,2000); var i=0 ...

  4. golang字符串常用的系统函数

    1.统计字符串的长度,按字节len(str) str := "hello北京" fmt.Println("str len=", len(str)) 2.字符串遍 ...

  5. 探索grafana

    因为zabbix的监控图形不够美观,功能也不够强大, 那么就用到了grafana 填写zabbix插件配置: 如下需要根据主机群组和主机名来完成图形: grafana报警如下: 解决如下: 更改标准设 ...

  6. 雷达无线电系列(二)经典CFAR算法图文解析与实现(matlab)

    一,CFAR基础知识介绍 简介 恒虚警检测技术是指雷达系统在保持虚警概率恒定条件下对接收机输出的信号与噪声作判别以确定目标信号是否存在的技术. 前提 由于接收机输出端中肯定存有噪声(包括大气噪声.人为 ...

  7. 通过DBCC Page查看在SQL Server中哪行数据被锁住了?

    原文:通过DBCC Page查看在SQL Server中哪行数据被锁住了? 如何查看被锁的是哪行数据?通过dbcc page可以. 要想明白这个问题: 首先,需要模拟阻塞问题,这里直接模拟了阻塞问题的 ...

  8. winform c# 请求网站,返回Json字符串

    private void callApibjhb() { //输出执行的开始时间 Console.WriteLine(string.Format("Bind {0}", DateT ...

  9. Scientific Toolworks Understand for linux

    Scientific Toolworks Understand for linux 这个软件我找了很久了,一直没有找到合适能装的.现在这款能在linux上顺利运行的版本,共享给需要的TX们. 个人觉得 ...

  10. kong命令(三)route

    介绍 route 是一套匹配客户端请求的规则.每个route都会匹配一个service,每个service可定关联多个route. 可以说service:route=1:n.一对多的关系.每个匹配到r ...