关于intersectionObserver实现页面图片懒加载

教程大全  / 正序浏览   ©

#楼主# 2020-2-19

跳转到指定楼层

马上注册,分享更多源码,享用更多功能,让你轻松玩转云大陆。

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

intersectionObserver是一个实用的web api,可以用来监控指定元素和视窗有交互时发生的回调,说白了就是当页面里的某个元素进入欣赏器屏幕或者离开时间你想干嘛,这个特性极得当实现懒加载(也可以监听页面scroll事件,这是另一种方法)。

给所有的图片一个data-src生存图片真正的链接

var img = document.querySelectorAll('[data-src]')

var iso=new IntersectionObserver(callfn)

function callfn(entries){

    entries.forEach((item)=>{

        if(item.isIntersecting){

            item.target.src=item.target.dataset.src

            iso.unobserve(item.target)

        }

    })

}

imgs.forEach((item)=>{

    iso.observe(item)

})

分享淘帖
回复

使用道具

您的回复是对作者最大的奖励

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关于作者

dzzjt

新手猿

  • 主题

    3

  • 帖子

    3

  • 关注者

    0

Archiver|手机版|小黑屋|云大陆 | 赣ICP备18008958号-4|网站地图
Powered by vrarz.com!  © 2019-2020版权所有云大陆