图片懒加载

JavaScript实现方式

<html>
    <head>
        <title>lazyLoad</title>
    </head>
    <style>
        div{
            height:120px;
            width:100px;
            overflow-y: auto;
        }
        img{
            width:80px;
            height:70px;
        }
    </style>
    <body>
        <div>
            <img data-zjy='https://dgss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=3810555211,2918796770&fm=173&app=49&f=JPEG?w=312&h=208&s=C9231F7244A1D7173F4C11CD0300E0E0'>
            <img data-zjy='https://dgss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=2871332316,5387476&fm=173&app=49&f=JPG?w=312&h=208&s=88F070845221BF555A554D9703003080'>
            <img data-zjy='https://dgss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=1208071780,1778912703&fm=173&app=49&f=JPEG?w=312&h=208&s=7A90428F4C010D476C28B9380300C008'>
            <img data-zjy='https://dgss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=2663639687,3262356824&fm=173&app=49&f=JPEG?w=312&h=208&s=191A6BD94E533ECA42B90558030040D3'>
        </div>
        <script>
            let observer = new IntersectionObserver((entries,observer)=>{
                entries.forEach((entry)=>{
                    entry.target.src = entry.target.dataset.zjy;
                    observer.unobserve(entry.target)
                })
            },{
                rootMargin:'0px 0px -10px 0px'
            })
            document.querySelectorAll('img').forEach(img=>{
                observer.observe(img)
            })
        </script>
    </body>
</html>

原生HTML <img /> lazy loading（Chrome 76支持）

  1. lazy loading加载数量与屏幕高度有关，高度越小加载数量越少，但并不是线性关系。
  2. lazy loading加载数量与网速有关，网速越慢加载数量越多，但不是线性关系。
  3. lazy loading加载没有缓冲，滚动即会触发新的图片资源加载
  4. lazy loading所在视口resize尺寸变化会触发图片懒加载（屏幕从小变大）。
  5. lazy loading根据滚动位置不同，lazy loading会忽略头尾的图片请求。

滚动记忆与跳过加载

浏览器普通刷新的时候会记住上一次滚动的位置，如果页面之前滚动位置在很下方，这个时候刷新页面，上方的图片并不会加载，只会加载下面的图片。

语法和参数

lazy
图片或框架懒加载，也就是元素资源快要被看到的时候加载。
eager
图片或框架无视一切进行加载。
auto
默认值。图片或框架基于浏览器自己的策略进行加载。

如果HTMLImageElement或者HTMLIFrameElement元素没有显式地设置loading属性或者loading属性的值不合法，则都被当作'auto'处理。

JavaScript相关

　　如何判断当前浏览器是否支持loading='lazy'?

const isSupportLoading = 'loading' in document.createElement('img')

const isSupportLoading = 'loading' in new Image()

const isSupportLoading = 'loading' in HTMLImageElement.prototype

　　如何获取loading属性值？

<img id='img' loading='lazy' />

const loadingValue = document.getElementById('img').loading // 如果浏览器并不支持原生的loading懒加载，则会返回undefined

　　loading自定义扩展并不会被覆盖，HTMLImageElement.prototype.loading会报错Illegal invocation

<img loading="lazy">

HTMLElement.prototype.loading = function(){}
const img = document.querySelector('[loading]')
img.loading // lazy

　　

 

posted @ 2020-09-01 23:53  671_MrSix  阅读(205)  评论(0)  编辑  收藏  举报