• home > webfront > SGML > html5 >

    图片懒加载[lazyload images]之H5原生

    Author:zhoulujun Date:

    之前实现图片懒加载一般使用 jquery lazyload js,后面H5支持了loading= "lazy "属性,如今又有了个lazyload= "on "来开启图片懒加载。lazyload支持img与iframe属性,和video的preload效果类似

    图片懒加载,其实就是利用占位符占据图片位置,优化图片加载。

    在jquery时代,一般的用法就是 jquery.lazyload.js,https://plugins.jquery.com/lazyload/

    但是,现在H5原生支持了,喜奔大普呀

    https://html.spec.whatwg.org/multipage/urls-and-fetching.html#lazy-loading-attributes

    相比之前的loading=lazy,lazyload控制的更加精细

    <img loading="lazy" src="demo.png" >

    现在

    <img lazyload="auto" src="demo.png" >
    <img lazyload="on" src="demo.png" >
    <img lazyload="off" src="demo.png" >

    具体的支持情况:https://caniuse.com/?search=%20lazyload

    使用 Chrome 原生 lazyload 属性进行图片懒加载支持情况

    参考文章:

    https://imagekit.io/blog/lazy-loading-images-complete-guide/






    转载本站文章《图片懒加载[lazyload images]之H5原生》,
    请注明出处:https://www.zhoulujun.cn/html/webfront/SGML/html5/2021_0927_8680.html