zoukankan      html  css  js  c++  java
  • [HTML5] Lazyload below the fold images and iframes with native browser lazy-loading

    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- 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>
  • 相关阅读:
    webstorm配置github 以及本地代码上传github。
    日期控件------moment.js
    图片查看器
    日期
    配置一个node服务器
    git代码管理
    vue
    javascript (字符串, 数组, 对象 , 日期 和 操作元素节点 动画 定时器)
    html css
    JS常用方法
  • 原文地址:https://www.cnblogs.com/Answer1215/p/11335545.html
Copyright © 2011-2022 走看看