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. Git强制推送代码到多个远程仓库

    git push -f origin master 注释: origin 远程仓库名, master 分支名,-f 为force,意为:强行.强制.

  2. hadoop在eclipse当中如何添加源码？

    [学习笔记] /*org.apache.hadoop.mapreduce.Mapper.Context,java.lang.InterruptedException,想看map的源代码,按contro ...

  3. jenkins sonarqube 代码检测部署

    install pgsql and sonarqube docker run --name postgresqldb -e POSTGRES_USER=sonar -e POSTGRES_PASSWO ...

  4. （二十八）jsp之EL表达式

    一.EL表达式简介 EL 全名为Expression Language.EL主要作用: 1.获取数据 EL表达式主要用于替换JSP页面中的脚本表达式,以从各种类型的web域 中检索java对象.获取数 ...

  5. powerdesign中逆向工程后name和comment的互换

    powerdesign 中,将数据库中可以逆向生成pdm的结构图,比较清晰看到系统的结构, 但假如是db先行的话,一般是db中的每个列中用comment中文注释说明这列是 干什么的,但逆向工程后,会发 ...

  6. mysql8中查询语句表别名不能使用 “of”

    今天在迁移一个项目的时候,发现有一个sql报错,但是语句跟迁移之前完全一样,所以想来应该是 mysql 版本差异导致的. 迁移之前版本:5.6.28(腾讯云) 迁移之后版本:8.0.16(阿里云) 新 ...

  7. 批量删除checkbox前台后台

    <%@ page contentType="text/html;charset=UTF-8" %><%@ include file="/WEB-INF/ ...

  8. gitlab自动化部署CI案例

    参考: https://blog.csdn.net/hxpjava1/article/details/78514999   (简单操作) https://blog.csdn.net/wh211212/ ...

  9. 去“BAT”这样面试，拿到offer的几率是80%

    一.概述 面试,难还是不难?取决于面试者的底蕴(气场+技能).心态和认知及沟通技巧.面试其实可以理解为一场聊天和谈判,在这过程中有心理.思想上的碰撞和博弈.其实你只需要搞清楚一个逻辑:“面试官为什么会 ...

  10. Flutter——Expanded组件（"可伸缩"组件）

    Expanded组件可以结合Row和Column布局组件使用. Expanded组件的常用属性 属性 说明 flex 元素占整个父Row/Column的比例 child 子元素 import 'pac ...