zoukankan      html  css  js  c++  java
  • [HTML5] Native lazy-loading for the web

    According to HTTPArchive, images are the most requested asset type for most websites and usually take up more bandwidth than any other resource. At the 90th percentile, sites send about 4.7 MB of images on desktop and mobile.

    Currently, there are two ways to defer the loading of off-screen images and iframes:

    In Chrome 76, you can use the loading attribute to completely defer the loading of offscreen images and iframes that can be reached by scrolling:

    <img src="image.png" loading="lazy" alt="…" width="200" height="200">
    <iframe src="https://example.com" loading="lazy"></iframe>
    • auto: Default lazy-loading behavior of the browser, which is the same as not including the attribute.
    • lazy: Defer loading of the resource until it reaches a calculated distance from the viewport.
    • eager: Load the resource immediately, regardless of where it's located on the page.

    The feature will continue to be updated until it's launched in a stable release (Chrome 76 at the earliest). But you can try it out by enabling the following flags in Chrome:

    chrome://flags/#enable-lazy-image-loading

    Notice: In order to make sure the good user experience, recommend to add the size info for the image:

    <img src="..." loading="lazy" width="200" height="200">
    <img src="..." loading="lazy" style="height:200px; 200px;">

    More detail

  • 相关阅读:
    组件库设计
    kill 3000
    nextjs服务端渲染原理
    Web交互增强
    webpack4.0打包的时候一些技巧
    把网站部署到阿里云上的步骤
    typescript使用小结
    webpack 4.0尝鲜
    基于Quick-cocos2d-x的资源更新方案 二
    Android APK是否需要预解压
  • 原文地址:https://www.cnblogs.com/Answer1215/p/11972588.html
Copyright © 2011-2022 走看看