图片懒加载 - 破产版

<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>

利用IntersectionObserver（交叉观察者）还可以实现滚动合适位置自动播放视频（加上链接wifi或是移动网络判断是否自动播放，知乎、虎扑、微博等列表展示的类似实现）

图片懒加载 - 破产版

推荐阅读