IntersectionObserver实现图片懒加载
ww.cnblogs.com/crazycode2/p/12228538.html
github地址：github.com/Ortonzhang/…
概念
IntersectionObserver接口(从属于Intersection Observer API)为开发者提供了一种可以异步监听目标元素与其祖先或视窗(viewport)交叉状态的手段。祖先元素与视窗(viewport)被称为根(root)。
这是MDN上给的官方概念，不用去管它，我粘出来只是为了显得专业点嘛...
重点看这里监听目标元素与其祖先或视窗交叉状态的手段，其实就是观察一个元素是否在视窗可见。
是否可见
可以看到，交叉了就是说明当前元素在视窗里，当前就是可见的了。
API
var io = new IntersectionObserver(callback, options)
其实就是一个简单的构造函数。
以上代码会返回一个IntersectionObserver实例，callback是当元素的可见性变化时候的回调函数，options是一些配置项（可选）。
我们使用返回的这个实例来进行一些操作。
io.observe(document.querySelector('img')) 开始观察，接受一个DOM节点对象
io.unobserve(element) 停止观察 接受一个element元素
io.disconnect() 关闭观察器
options
root
用于观察的根元素，默认是浏览器的视口，也可以指定具体元素，指定元素的时候用于观察的元素必须是指定元素的子元素
threshold
用来指定交叉比例，决定什么时候触发回调函数，是一个数组，默认是[0]。
const options = {
root: null,
threshold: [0, 0.5, 1]
}
var io = new IntersectionObserver(callback, options)
io.observe(document.querySelector('img'))
上面代码，我们指定了交叉比例为0，0.5，1，当观察元素img0%、50%、100%时候就会触发回调函数
rootMargin
用来扩大或者缩小视窗的的大小，使用css的定义方法，10px 10px 30px 20px表示top、right、bottom 和 left的值
const options = {
root: document.querySelector('.box'),
threshold: [0, 0.5, 1],
rootMargin: '30px 100px 20px'
}
为了方便理解，我画了张图，如
options
首先我们来看下图上的问题，蓝线是什么呢？他就是咱们定义的root元素，我们添加了rootMargin属性，将视窗的增大了，虚线就是现在的视窗，所以元素现在也就在视窗里面了。
由此可见，root元素只有在rootMargin为空的时候才是绝对的视窗。
说了简单的options，接下来我们看下callback。
callback
上面我们说到，当元素的可见性变化时，就会触发callback函数。
callback函数会触发两次，元素进入视窗（开始可见时）和元素离开视窗（开始不可见时）都会触发
var io = new IntersectionObserver((entries)=>{
console.log(entries)
})
io.observe($0)
以上代码，请在chrome控制台进行调试，这里我使用了$0选择了上一次我审查元素的选择的节点
运行结果如下
我们可以看到callback函数有个entries参数，它是个IntersectionObserverEntry对象数组，接下来我们重点说下IntersectionObserverEntry对象
IntersectionObserverEntry
IntersectionObserverEntry提供观察元素的信息，有七个属性。
boundingClientRect 目标元素的矩形信息
intersectionRatio 相交区域和目标元素的比例值 intersectionRect/boundingClientRect 不可见时小于等于0
intersectionRect 目标元素和视窗（根）相交的矩形信息 可以称为相交区域
isIntersecting 目标元素当前是否可见 Boolean值 可见为true
rootBounds 根元素的矩形信息，没有指定根元素就是当前视窗的矩形信息
target 观察的目标元素
time 返回一个记录从IntersectionObserver的时间到交叉被触发的时间的时间戳
上面几个矩形信息的关系如下
👇 划重点
intersectionRatio和isIntersecting是用来判断元素是否可见的，押题咯...
懒加载
好了，通过上面一些概念我们大概了解了IntersectionObserver是个什么东西，接下来我们用它来写点代码，写什么呢？没错就是懒加载。
通过IntersectionObserver来实现懒加载，就简单的多了，我们只需要设置回调，判断当前元素是否可见，再进行渲染操作就行了，而不用去关心内部的计算。
主要代码如下
const io = new IntersectionObserver(()=>{ // 实例化 默认基于当前视窗
})
let imgs = document.querySelectorAll('[data-src]') // 将图片的真实url设置为data-src src属性为占位图 元素可见时候替换src
function callback(entries){
entries.forEach((item) => { // 遍历entries数组
if(item.isIntersecting){ // 当前元素可见
item.target.src = item.target.dataset.src // 替换src
io.unobserve(item.target) // 停止观察当前元素 避免不可见时候再次调用callback函数
}
})
}
imgs.forEach((item)=>{ // io.observe接受一个DOM元素，添加多个监听 使用forEach
io.observe(item)
})
⚠️注意
目前IntersectionObserver是一个实验中的功能，请酌情使用。
完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>淘宝女郎</title>
</head>
<style>
.girls-list-wrap{min-height:400px;width:100%;margin-top:10px;overflow: hidden}
.girls-list-wrap .girls-list{width:1155px;margin:0 auto; list-style: none}
.girls-list-wrap .girls-list .item{width:230px;height:288px;float:left;position:relative;*display:inline;margin:-1px 0 0 -1px}
.girls-list-wrap .girls-list .item a{display:block;text-decoration:none;height:100%;width:100%}
.girls-list-wrap .girls-list .item a:hover .item-wrap{width:246px;height:304px;border:2px solid #282828;background-color:#282828;margin:-10px 0 0 -10px;z-index:1}
.girls-list-wrap .girls-list .item a:hover .info{color:#fff}
.girls-list-wrap .girls-list .item a:hover .info .city,.girls-list-wrap .girls-list .item a:hover .info .name{color:#fff}
.girls-list-wrap .girls-list .item a:hover img{height:246px}
.girls-list-wrap .girls-list .item img{width:100%;height:228px;-webkit-transition-property:height;-webkit-transition-duration:.2s;-webkit-transition-timing-function:ease-in-out;-moz-transition-property:height;-moz-transition-duration:.2s;-moz-transition-timing-function:ease-in-out;-ms-transition-property:height;-ms-transition-duration:.2s;-ms-transition-timing-function:ease-in-out;-o-transition-property:height;-o-transition-duration:.2s;-o-transition-timing-function:ease-in-out;transition-property:height;transition-duration:.2s;transition-timing-function:ease-in-out}
.girls-list-wrap .girls-list .item .info{padding-left:10px}
.girls-list-wrap .girls-list .item .info .name{color:#666;margin-right:5px}
.girls-list-wrap .girls-list .item .info .city{color:#a9a9a9;font-size:12px;vertical-align:top}
.girls-list-wrap .girls-list .item .row2{color:#a9a9a9;font-size:12px;margin-top:3px}
.girls-list-wrap .girls-list .item .row2 .fr{float:right;margin-right:10px}
.girls-list-wrap .girls-list .item .row2 .iconfont{margin-right:5px}
.girls-list-wrap .girls-list .item-wrap{width:228px;height:288px;position:absolute;float:left;border:1px solid #a0a0a0;background-color:#fff;-webkit-transition-property:width height border margin z-index;-webkit-transition-duration:.2s;-webkit-transition-timing-function:ease-in-out;-moz-transition-property:width height border margin z-index;-moz-transition-duration:.2s;-moz-transition-timing-function:ease-in-out;-ms-transition-property:width height border margin z-index;-ms-transition-duration:.2s;-ms-transition-timing-function:ease-in-out;-o-transition-property:width height border margin z-index;-o-transition-duration:.2s;-o-transition-timing-function:ease-in-out;transition-property:width height border margin z-index;transition-duration:.2s;transition-timing-function:ease-in-out}
</style>
<body>
<div class="girls-list-wrap">
<ul class="girls-list clearfix" id="J_GirlsList">
<li class="item">
<a href="#">
<div class="item-wrap">
<div class="img"><img data-src="https://gtd.alicdn.com/sns_logo/i3/TB1wnBTKFXXXXcQXXXXSutbFXXX.jpg_240x240xz.jpg" src="https://img.alicdn.com/tps/i3/T1QYOyXqRaXXaY1rfd-32-32.gif"></div>
<div class="info">
<span class="name">朱琳</span>
<span class="city">杭州市</span>
</div>
<div class="info row2">
<span>165CM / 44KG</span>
<span class="fr"><i class="iconfont">👍</i>3631971</span>
</div>
<div class="load-loading">
<div class="loading">
</div>
</div>
</div>
</a>
</li>
<li class="item">
<a href="#">
<div class="item-wrap">
<div class="img"><img data-src="https://gtd.alicdn.com/sns_logo/i1/TB124_3NXXXXXasXVXXSutbFXXX.jpg_240x240xz.jpg" src="https://img.alicdn.com/tps/i3/T1QYOyXqRaXXaY1rfd-32-32.gif"></div>
<div class="info">
<span class="name">尚洁</span>
<span class="city">杭州市</span>
</div>
<div class="info row2">
<span>168CM / 45KG</span>
<span class="fr"><i class="iconfont">👍</i>3597522</span>
</div>
</div>
</a>
</li>
<li class="item">
<a href="#">
<div class="item-wrap">
<div class="img"><img data-src="https://gtd.alicdn.com/sns_logo/i7/TB1IWtgQFXXXXcmXFXXSutbFXXX.jpg_240x240xz.jpg" src="https://img.alicdn.com/tps/i3/T1QYOyXqRaXXaY1rfd-32-32.gif"></div>
<div class="info">
<span class="name">韩模静敏</span>
<span class="city">广州市</span>
</div>
<div class="info row2">
<span>168CM / 45KG</span>
<span class="fr"><i class="iconfont">👍</i>1784400</span>
</div>
</div>
</a>
</li>
<li class="item">
<a href="#">
<div class="item-wrap">
<div class="img"><img data-src="https://gtd.alicdn.com/sns_logo/i1/TB1_f_PLXXXXXbVXpXXSutbFXXX.jpg_240x240xz.jpg" src="https://img.alicdn.com/tps/i3/T1QYOyXqRaXXaY1rfd-32-32.gif"></div>
<div class="info">
<span class="name">崔悦颦儿</span>
<span class="city">嘉兴市</span>
</div>
<div class="info row2">
<span>168CM / 46KG</span>
<span class="fr"><i class="iconfont">👍</i>1586529</span>
</div>
</div>
</a>
</li>
<li class="item">
<a href="#">
<div class="item-wrap">
<div class="img"><img data-src="https://gtd.alicdn.com/sns_logo/i1/TB1DX3hIpXXXXXIaXXXSutbFXXX.jpg_240x240xz.jpg" src="https://img.alicdn.com/tps/i3/T1QYOyXqRaXXaY1rfd-32-32.gif"></div>
<div class="info">
<span class="name">米迪MD</span>
<span class="city">杭州市</span>
</div>
<div class="info row2">
<span>168CM / 46KG</span>
<span class="fr"><i class="iconfont">👍</i>1516797</span>
</div>
</div>
</a>
</li>
<li class="item">
<a href="#">
<div class="item-wrap">
<div class="img"><img data-src="https://gtd.alicdn.com/sns_logo/i6/TB1SIYrLXXXXXaAXpXXSutbFXXX.jpg_240x240xz.jpg" src="https://img.alicdn.com/tps/i3/T1QYOyXqRaXXaY1rfd-32-32.gif"></div>
<div class="info">
<span class="name">佳佳佳-</span>
<span class="city">杭州市</span>
</div>
<div class="info row2">
<span>170CM / 48KG</span>
<span class="fr"><i class="iconfont">👍</i>991131</span>
</div>
</div>
</a>
</li>
<li class="item">
<a href="#">
<div class="item-wrap">
<div class="img"><img data-src="https://gtd.alicdn.com/sns_logo/i1/TB11yxeNVXXXXbwXFXXSutbFXXX.jpg_240x240xz.jpg" src="https://img.alicdn.com/tps/i3/T1QYOyXqRaXXaY1rfd-32-32.gif"></div>
<div class="info">
<span class="name">三火火</span>
<span class="city">杭州市</span>
</div>
<div class="info row2">
<span>165CM / 45KG</span>
<span class="fr"><i class="iconfont">👍</i>700038</span>
</div>
</div>
</a>
</li>
<li class="item">
<a href="#">
<div class="item-wrap">
<div class="img"><img data-src="https://gtd.alicdn.com/sns_logo/i3/TB1ndJiQFXXXXctaXXXSutbFXXX.jpg_240x240xz.jpg" src="https://img.alicdn.com/tps/i3/T1QYOyXqRaXXaY1rfd-32-32.gif"></div>
<div class="info">
<span class="name">王龄萱</span>
<span class="city">杭州市</span>
</div>
<div class="info row2">
<span>168CM / 46KG</span>
<span class="fr"><i class="iconfont">👍</i>564885</span>
</div>
</div>
</a>
</li>
<li class="item">
<a href="#">
<div class="item-wrap">
<div class="img"><img data-src="https://gtd.alicdn.com/sns_logo/i4/TB1BYGDLpXXXXbuXXXXSutbFXXX.jpg_240x240xz.jpg" src="https://img.alicdn.com/tps/i3/T1QYOyXqRaXXaY1rfd-32-32.gif"></div>
<div class="info">
<span class="name">李柒柒</span>
<span class="city">杭州市</span>
</div>
<div class="info row2">
<span>168CM / 47KG</span>
<span class="fr"><i class="iconfont">👍</i>451424</span>
</div>
</div>
</a>
</li>
<li class="item">
<a href="#">
<div class="item-wrap">
<div class="img"><img data-src="https://gtd.alicdn.com/sns_logo/i2/TB1_9GoMVXXXXXmaXXXSutbFXXX.jpg_240x240xz.jpg" src="https://img.alicdn.com/tps/i3/T1QYOyXqRaXXaY1rfd-32-32.gif"></div>
<div class="info">
<span class="name">紫轩</span>
<span class="city">杭州市</span>
</div>
<div class="info row2">
<span>168CM / 48KG</span>
<span class="fr"><i class="iconfont">👍</i>402000</span>
</div>
</div>
</a>
</li>
<li class="item">
<a href="#">
<div class="item-wrap">
<div class="img"><img data-src="https://gtd.alicdn.com/sns_logo/i2/TB1cSZZNFXXXXaKaXXXSutbFXXX.jpg_240x240xz.jpg" src="https://img.alicdn.com/tps/i3/T1QYOyXqRaXXaY1rfd-32-32.gif"></div>
<div class="info">
<span class="name">朱圆圆</span>
<span class="city">杭州市</span>
</div>
<div class="info row2">
<span>162CM / 48KG</span>
<span class="fr"><i class="iconfont">👍</i>363076</span>
</div>
</div>
</a>
</li>
<li class="item">
<a href="#">
<div class="item-wrap">
<div class="img"><img data-src="https://gtd.alicdn.com/sns_logo/i4/TB1MwqbLpXXXXaEXpXXSutbFXXX.jpg_240x240xz.jpg" src="https://img.alicdn.com/tps/i3/T1QYOyXqRaXXaY1rfd-32-32.gif"></div>
<div class="info">
<span class="name">花花花花</span>
<span class="city">杭州市</span>
</div>
<div class="info row2">
<span>173CM / 98KG</span>
<span class="fr"><i class="iconfont">👍</i>362639</span>
</div>
</div>
</a>
</li>
<li class="item">
<a href="#">
<div class="item-wrap">
<div class="img"><img data-src="https://gtd.alicdn.com/sns_logo/i8/TB1RVS_QpXXXXXBXXXXSutbFXXX.jpg_240x240xz.jpg" src="https://img.alicdn.com/tps/i3/T1QYOyXqRaXXaY1rfd-32-32.gif"></div>
<div class="info">
<span class="name">吴小雨l</span>
<span class="city">杭州市</span>
</div>
<div class="info row2">
<span>166CM / 44KG</span>
<span class="fr"><i class="iconfont">👍</i>323602</span>
</div>
</div>
</a>
</li>
<li class="item">
<a href="#">
<div class="item-wrap">
<div class="img"><img data-src="https://gtd.alicdn.com/sns_logo/i5/TB1xEJiLXXXXXcxaXXXSutbFXXX.jpg_240x240xz.jpg" src="https://img.alicdn.com/tps/i3/T1QYOyXqRaXXaY1rfd-32-32.gif"></div>
<div class="info">
<span class="name">筱萌</span>
<span class="city">杭州市</span>
</div>
<div class="info row2">
<span>170CM / 50KG</span>
<span class="fr"><i class="iconfont">👍</i>301994</span>
</div>
</div>
</a>
</li>
<li class="item">
<a href="#">
<div class="item-wrap">
<div class="img"><img data-src="https://gtd.alicdn.com/sns_logo/i6/TB1DSuHJVXXXXXmXXXXwu0bFXXX.png_240x240xz.jpg" src="https://img.alicdn.com/tps/i3/T1QYOyXqRaXXaY1rfd-32-32.gif"></div>
<div class="info">
<span class="name">未未</span>
<span class="city">杭州市</span>
</div>
<div class="info row2">
<span>165CM / 46KG</span>
<span class="fr"><i class="iconfont">👍</i>293755</span>
</div>
</div>
</a>
</li>
<li class="item">
<a href="#">
<div class="item-wrap">
<div class="img"><img data-src="https://gtd.alicdn.com/sns_logo/i5/TB1aMNyLpXXXXa2XXXXSutbFXXX.jpg_240x240xz.jpg" src="https://img.alicdn.com/tps/i3/T1QYOyXqRaXXaY1rfd-32-32.gif"></div>
<div class="info">
<span class="name">朱琳朱琳</span>
<span class="city">杭州市</span>
</div>
<div class="info row2">
<span>165CM / 44KG</span>
<span class="fr"><i class="iconfont">👍</i>280524</span>
</div>
</div>
</a>
</li>
<li class="item">
<a href="#">
<div class="item-wrap">
<div class="img"><img data-src="https://gtd.alicdn.com/sns_logo/i8/TB1JRHEQpXXXXXwXVXXSutbFXXX.jpg_240x240xz.jpg" src="https://img.alicdn.com/tps/i3/T1QYOyXqRaXXaY1rfd-32-32.gif"></div>
<div class="info">
<span class="name">崔辰辰</span>
<span class="city">杭州市</span>
</div>
<div class="info row2">
<span>168CM / 45KG</span>
<span class="fr"><i class="iconfont">👍</i>268974</span>
</div>
</div>
</a>
</li>
<li class="item">
<a href="#">
<div class="item-wrap">
<div class="img"><img data-src="https://gtd.alicdn.com/sns_logo/i7/TB1qKEuQpXXXXXYXXXXSutbFXXX.jpg_240x240xz.jpg" src="https://img.alicdn.com/tps/i3/T1QYOyXqRaXXaY1rfd-32-32.gif"></div>
<div class="info">
<span class="name">蒋梦云</span>
<span class="city">杭州市</span>
</div>
<div class="info row2">
<span>167CM / 48KG</span>
<span class="fr"><i class="iconfont">👍</i>261163</span>
</div>
</div>
</a>
</li>
<li class="item">
<a href="#">
<div class="item-wrap">
<div class="img"><img data-src="https://gtd.alicdn.com/sns_logo/i7/TB1TlOfQFXXXXX2XXXXwu0bFXXX.png_240x240xz.jpg" src="https://img.alicdn.com/tps/i3/T1QYOyXqRaXXaY1rfd-32-32.gif"></div>
<div class="info">
<span class="name">程茜如</span>
<span class="city">广州市</span>
</div>
<div class="info row2">
<span>170CM / 47KG</span>
<span class="fr"><i class="iconfont">👍</i>257742</span>
</div>
</div>
</a>
</li>
<li class="item">
<a href="#">
<div class="item-wrap">
<div class="img"><img data-src="https://gtd.alicdn.com/sns_logo/i1/TB1SKu.QpXXXXbDXVXXSutbFXXX.jpg_240x240xz.jpg" src="https://img.alicdn.com/tps/i3/T1QYOyXqRaXXaY1rfd-32-32.gif"></div>
<div class="info">
<span class="name">何小蕊</span>
<span class="city">杭州市</span>
</div>
<div class="info row2">
<span>168CM / 48KG</span>
<span class="fr"><i class="iconfont">👍</i>251115</span>
</div>
</div>
</a>
</li>
<li class="item">
<a href="#">
<div class="item-wrap">
<div class="img"><img data-src="https://gtd.alicdn.com/sns_logo/i2/TB17gJ3OXXXXXcrXpXXSutbFXXX.jpg_240x240xz.jpg" src="https://img.alicdn.com/tps/i3/T1QYOyXqRaXXaY1rfd-32-32.gif"></div>
<div class="info">
<span class="name">小造片</span>
<span class="city">杭州市</span>
</div>
<div class="info row2">
<span>166CM / 45KG</span>
<span class="fr"><i class="iconfont">👍</i>242858</span>
</div>
</div>
</a>
</li>
<li class="item">
<a href="#">
<div class="item-wrap">
<div class="img"><img data-src="https://gtd.alicdn.com/sns_logo/i8/TB1um5GQpXXXXbiaXXXSutbFXXX.jpg_240x240xz.jpg" src="https://img.alicdn.com/tps/i3/T1QYOyXqRaXXaY1rfd-32-32.gif"></div>
<div class="info">
<span class="name">一柳hz</span>
<span class="city">杭州市</span>
</div>
<div class="info row2">
<span>168CM / 46KG</span>
<span class="fr"><i class="iconfont">👍</i>227222</span>
</div>
</div>
</a>
</li>
<li class="item">
<a href="#">
<div class="item-wrap">
<div class="img"><img data-src="https://gtd.alicdn.com/sns_logo/i1/TB1pxCTQpXXXXa2apXXSutbFXXX.jpg_240x240xz.jpg" src="https://img.alicdn.com/tps/i3/T1QYOyXqRaXXaY1rfd-32-32.gif"></div>
<div class="info">
<span class="name">陶学洲</span>
<span class="city">杭州市</span>
</div>
<div class="info row2">
<span>169CM / 48KG</span>
<span class="fr"><i class="iconfont">👍</i>217663</span>
</div>
</div>
</a>
</li>
<li class="item">
<a href="#">
<div class="item-wrap">
<div class="img"><img data-src="https://gtd.alicdn.com/sns_logo/i6/TB1zksMNVXXXXaRapXXSutbFXXX.jpg_240x240xz.jpg" src="https://img.alicdn.com/tps/i3/T1QYOyXqRaXXaY1rfd-32-32.gif"></div>
<div class="info">
<span class="name">晨子cz</span>
<span class="city">杭州市</span>
</div>
<div class="info row2">
<span>168CM / 45KG</span>
<span class="fr"><i class="iconfont">👍</i>213423</span>
</div>
</div>
</a>
</li>
<li class="item">
<a href="#">
<div class="item-wrap">
<div class="img"><img data-src="https://gtd.alicdn.com/sns_logo/i4/TB1nbrcOXXXXXXEXpXXSutbFXXX.jpg_240x240xz.jpg" src="https://img.alicdn.com/tps/i3/T1QYOyXqRaXXaY1rfd-32-32.gif"></div>
<div class="info">
<span class="name">大素儿</span>
<span class="city">杭州市</span>
</div>
<div class="info row2">
<span>162CM / 44KG</span>
<span class="fr"><i class="iconfont">👍</i>211507</span>
</div>
</div>
</a>
</li>
<li class="item">
<a href="#">
<div class="item-wrap">
<div class="img"><img data-src="https://gtd.alicdn.com/sns_logo/i4/TB1CI_NQpXXXXXaXVXXSutbFXXX.jpg_240x240xz.jpg" src="https://img.alicdn.com/tps/i3/T1QYOyXqRaXXaY1rfd-32-32.gif"></div>
<div class="info">
<span class="name">杨爱米</span>
<span class="city">杭州市</span>
</div>
<div class="info row2">
<span>170CM / 49KG</span>
<span class="fr"><i class="iconfont">👍</i>210294</span>
</div>
</div>
</a>
</li>
<li class="item">
<a href="#">
<div class="item-wrap">
<div class="img"><img data-src="https://gtd.alicdn.com/sns_logo/i2/TB18vTdQFXXXXXlXpXXwu0bFXXX.png_240x240xz.jpg" src="https://img.alicdn.com/tps/i3/T1QYOyXqRaXXaY1rfd-32-32.gif"></div>
<div class="info">
<span class="name">金婷</span>
<span class="city">杭州市</span>
</div>
<div class="info row2">
<span>168CM / 48KG</span>
<span class="fr"><i class="iconfont">👍</i>207124</span>
</div>
</div>
</a>
</li>
<li class="item">
<a href="#">
<div class="item-wrap">
<div class="img"><img data-src="https://gtd.alicdn.com/sns_logo/i7/TB1doDVQpXXXXcRaXXXSutbFXXX.jpg_240x240xz.jpg" src="https://img.alicdn.com/tps/i3/T1QYOyXqRaXXaY1rfd-32-32.gif"></div>
<div class="info">
<span class="name">雪莉sori</span>
<span class="city">杭州市</span>
</div>
<div class="info row2">
<span>165CM / 45KG</span>
<span class="fr"><i class="iconfont">👍</i>204574</span>
</div>
</div>
</a>
</li>
<li class="item">
<a href="#">
<div class="item-wrap">
<div class="img"><img data-src="https://gtd.alicdn.com/sns_logo/i1/TB17LgBNFXXXXaSXVXXSutbFXXX.jpg_240x240xz.jpg" src="https://img.alicdn.com/tps/i3/T1QYOyXqRaXXaY1rfd-32-32.gif"></div>
<div class="info">
<span class="name">沈小妍</span>
<span class="city">杭州市</span>
</div>
<div class="info row2">
<span>165CM / 44KG</span>
<span class="fr"><i class="iconfont">👍</i>204285</span>
</div>
</div>
</a>
</li>
<li class="item">
<a href="#">
<div class="item-wrap">
<div class="img"><img data-src="https://gtd.alicdn.com/sns_logo/i6/TB1fVJJQFXXXXcyXpXXSutbFXXX.jpg_240x240xz.jpg" src="https://img.alicdn.com/tps/i3/T1QYOyXqRaXXaY1rfd-32-32.gif"></div>
<div class="info">
<span class="name">模特雪梨</span>
<span class="city">杭州市</span>
</div>
<div class="info row2">
<span>165CM / 47KG</span>
<span class="fr"><i class="iconfont">👍</i>201566</span>
</div>
</div>
</a>
</li>
<li class="item">
<a href="#">
<div class="item-wrap">
<div class="img"><img data-src="https://gtd.alicdn.com/sns_logo/i3/TB1wnBTKFXXXXcQXXXXSutbFXXX.jpg_240x240xz.jpg" src="https://img.alicdn.com/tps/i3/T1QYOyXqRaXXaY1rfd-32-32.gif"></div>
<div class="info">
<span class="name">朱琳</span>
<span class="city">杭州市</span>
</div>
<div class="info row2">
<span>165CM / 44KG</span>
<span class="fr"><i class="iconfont">👍</i>3631971</span>
</div>
<div class="load-loading">
<div class="loading">
</div>
</div>
</div>
</a>
</li>
<li class="item">
<a href="#">
<div class="item-wrap">
<div class="img"><img data-src="https://gtd.alicdn.com/sns_logo/i1/TB124_3NXXXXXasXVXXSutbFXXX.jpg_240x240xz.jpg" src="https://img.alicdn.com/tps/i3/T1QYOyXqRaXXaY1rfd-32-32.gif"></div>
<div class="info">
<span class="name">尚洁</span>
<span class="city">杭州市</span>
</div>
<div class="info row2">
<span>168CM / 45KG</span>
<span class="fr"><i class="iconfont">👍</i>3597522</span>
</div>
</div>
</a>
</li>
<li class="item">
<a href="#">
<div class="item-wrap">
<div class="img"><img data-src="https://gtd.alicdn.com/sns_logo/i7/TB1IWtgQFXXXXcmXFXXSutbFXXX.jpg_240x240xz.jpg" src="https://img.alicdn.com/tps/i3/T1QYOyXqRaXXaY1rfd-32-32.gif"></div>
<div class="info">
<span class="name">韩模静敏</span>
<span class="city">广州市</span>
</div>
<div class="info row2">
<span>168CM / 45KG</span>
<span class="fr"><i class="iconfont">👍</i>1784400</span>
</div>
</div>
</a>
</li>
<li class="item">
<a href="#">
<div class="item-wrap">
<div class="img"><img data-src="https://gtd.alicdn.com/sns_logo/i1/TB1_f_PLXXXXXbVXpXXSutbFXXX.jpg_240x240xz.jpg" src="https://img.alicdn.com/tps/i3/T1QYOyXqRaXXaY1rfd-32-32.gif"></div>
<div class="info">
<span class="name">崔悦颦儿</span>
<span class="city">嘉兴市</span>
</div>
<div class="info row2">
<span>168CM / 46KG</span>
<span class="fr"><i class="iconfont">👍</i>1586529</span>
</div>
</div>
</a>
</li>
<li class="item">
<a href="#">
<div class="item-wrap">
<div class="img"><img data-src="https://gtd.alicdn.com/sns_logo/i1/TB1DX3hIpXXXXXIaXXXSutbFXXX.jpg_240x240xz.jpg" src="https://img.alicdn.com/tps/i3/T1QYOyXqRaXXaY1rfd-32-32.gif"></div>
<div class="info">
<span class="name">米迪MD</span>
<span class="city">杭州市</span>
</div>
<div class="info row2">
<span>168CM / 46KG</span>
<span class="fr"><i class="iconfont">👍</i>1516797</span>
</div>
</div>
</a>
</li>
<li class="item">
<a href="#">
<div class="item-wrap">
<div class="img"><img data-src="https://gtd.alicdn.com/sns_logo/i6/TB1SIYrLXXXXXaAXpXXSutbFXXX.jpg_240x240xz.jpg" src="https://img.alicdn.com/tps/i3/T1QYOyXqRaXXaY1rfd-32-32.gif"></div>
<div class="info">
<span class="name">佳佳佳-</span>
<span class="city">杭州市</span>
</div>
<div class="info row2">
<span>170CM / 48KG</span>
<span class="fr"><i class="iconfont">👍</i>991131</span>
</div>
</div>
</a>
</li>
<li class="item">
<a href="#">
<div class="item-wrap">
<div class="img"><img data-src="https://gtd.alicdn.com/sns_logo/i1/TB11yxeNVXXXXbwXFXXSutbFXXX.jpg_240x240xz.jpg" src="https://img.alicdn.com/tps/i3/T1QYOyXqRaXXaY1rfd-32-32.gif"></div>
<div class="info">
<span class="name">三火火</span>
<span class="city">杭州市</span>
</div>
<div class="info row2">
<span>165CM / 45KG</span>
<span class="fr"><i class="iconfont">👍</i>700038</span>
</div>
</div>
</a>
</li>
<li class="item">
<a href="#">
<div class="item-wrap">
<div class="img"><img data-src="https://gtd.alicdn.com/sns_logo/i3/TB1ndJiQFXXXXctaXXXSutbFXXX.jpg_240x240xz.jpg" src="https://img.alicdn.com/tps/i3/T1QYOyXqRaXXaY1rfd-32-32.gif"></div>
<div class="info">
<span class="name">王龄萱</span>
<span class="city">杭州市</span>
</div>
<div class="info row2">
<span>168CM / 46KG</span>
<span class="fr"><i class="iconfont">👍</i>564885</span>
</div>
</div>
</a>
</li>
<li class="item">
<a href="#">
<div class="item-wrap">
<div class="img"><img data-src="https://gtd.alicdn.com/sns_logo/i4/TB1BYGDLpXXXXbuXXXXSutbFXXX.jpg_240x240xz.jpg" src="https://img.alicdn.com/tps/i3/T1QYOyXqRaXXaY1rfd-32-32.gif"></div>
<div class="info">
<span class="name">李柒柒</span>
<span class="city">杭州市</span>
</div>
<div class="info row2">
<span>168CM / 47KG</span>
<span class="fr"><i class="iconfont">👍</i>451424</span>
</div>
</div>
</a>
</li>
<li class="item">
<a href="#">
<div class="item-wrap">
<div class="img"><img data-src="https://gtd.alicdn.com/sns_logo/i2/TB1_9GoMVXXXXXmaXXXSutbFXXX.jpg_240x240xz.jpg" src="https://img.alicdn.com/tps/i3/T1QYOyXqRaXXaY1rfd-32-32.gif"></div>
<div class="info">
<span class="name">紫轩</span>
<span class="city">杭州市</span>
</div>
<div class="info row2">
<span>168CM / 48KG</span>
<span class="fr"><i class="iconfont">👍</i>402000</span>
</div>
</div>
</a>
</li>
<li class="item">
<a href="#">
<div class="item-wrap">
<div class="img"><img data-src="https://gtd.alicdn.com/sns_logo/i2/TB1cSZZNFXXXXaKaXXXSutbFXXX.jpg_240x240xz.jpg" src="https://img.alicdn.com/tps/i3/T1QYOyXqRaXXaY1rfd-32-32.gif"></div>
<div class="info">
<span class="name">朱圆圆</span>
<span class="city">杭州市</span>
</div>
<div class="info row2">
<span>162CM / 48KG</span>
<span class="fr"><i class="iconfont">👍</i>363076</span>
</div>
</div>
</a>
</li>
<li class="item">
<a href="#">
<div class="item-wrap">
<div class="img"><img data-src="https://gtd.alicdn.com/sns_logo/i4/TB1MwqbLpXXXXaEXpXXSutbFXXX.jpg_240x240xz.jpg" src="https://img.alicdn.com/tps/i3/T1QYOyXqRaXXaY1rfd-32-32.gif"></div>
<div class="info">
<span class="name">花花花花</span>
<span class="city">杭州市</span>
</div>
<div class="info row2">
<span>173CM / 98KG</span>
<span class="fr"><i class="iconfont">👍</i>362639</span>
</div>
</div>
</a>
</li>
<li class="item">
<a href="#">
<div class="item-wrap">
<div class="img"><img data-src="https://gtd.alicdn.com/sns_logo/i8/TB1RVS_QpXXXXXBXXXXSutbFXXX.jpg_240x240xz.jpg" src="https://img.alicdn.com/tps/i3/T1QYOyXqRaXXaY1rfd-32-32.gif"></div>
<div class="info">
<span class="name">吴小雨l</span>
<span class="city">杭州市</span>
</div>
<div class="info row2">
<span>166CM / 44KG</span>
<span class="fr"><i class="iconfont">👍</i>323602</span>
</div>
</div>
</a>
</li>
<li class="item">
<a href="#">
<div class="item-wrap">
<div class="img"><img data-src="https://gtd.alicdn.com/sns_logo/i5/TB1xEJiLXXXXXcxaXXXSutbFXXX.jpg_240x240xz.jpg" src="https://img.alicdn.com/tps/i3/T1QYOyXqRaXXaY1rfd-32-32.gif"></div>
<div class="info">
<span class="name">筱萌</span>
<span class="city">杭州市</span>
</div>
<div class="info row2">
<span>170CM / 50KG</span>
<span class="fr"><i class="iconfont">👍</i>301994</span>
</div>
</div>
</a>
</li>
<li class="item">
<a href="#">
<div class="item-wrap">
<div class="img"><img data-src="https://gtd.alicdn.com/sns_logo/i6/TB1DSuHJVXXXXXmXXXXwu0bFXXX.png_240x240xz.jpg" src="https://img.alicdn.com/tps/i3/T1QYOyXqRaXXaY1rfd-32-32.gif"></div>
<div class="info">
<span class="name">未未</span>
<span class="city">杭州市</span>
</div>
<div class="info row2">
<span>165CM / 46KG</span>
<span class="fr"><i class="iconfont">👍</i>293755</span>
</div>
</div>
</a>
</li>
<li class="item">
<a href="#">
<div class="item-wrap">
<div class="img"><img data-src="https://gtd.alicdn.com/sns_logo/i5/TB1aMNyLpXXXXa2XXXXSutbFXXX.jpg_240x240xz.jpg" src="https://img.alicdn.com/tps/i3/T1QYOyXqRaXXaY1rfd-32-32.gif"></div>
<div class="info">
<span class="name">朱琳朱琳</span>
<span class="city">杭州市</span>
</div>
<div class="info row2">
<span>165CM / 44KG</span>
<span class="fr"><i class="iconfont">👍</i>280524</span>
</div>
</div>
</a>
</li>
<li class="item">
<a href="#">
<div class="item-wrap">
<div class="img"><img data-src="https://gtd.alicdn.com/sns_logo/i8/TB1JRHEQpXXXXXwXVXXSutbFXXX.jpg_240x240xz.jpg" src="https://img.alicdn.com/tps/i3/T1QYOyXqRaXXaY1rfd-32-32.gif"></div>
<div class="info">
<span class="name">崔辰辰</span>
<span class="city">杭州市</span>
</div>
<div class="info row2">
<span>168CM / 45KG</span>
<span class="fr"><i class="iconfont">👍</i>268974</span>
</div>
</div>
</a>
</li>
<li class="item">
<a href="#">
<div class="item-wrap">
<div class="img"><img data-src="https://gtd.alicdn.com/sns_logo/i7/TB1qKEuQpXXXXXYXXXXSutbFXXX.jpg_240x240xz.jpg" src="https://img.alicdn.com/tps/i3/T1QYOyXqRaXXaY1rfd-32-32.gif"></div>
<div class="info">
<span class="name">蒋梦云</span>
<span class="city">杭州市</span>
</div>
<div class="info row2">
<span>167CM / 48KG</span>
<span class="fr"><i class="iconfont">👍</i>261163</span>
</div>
</div>
</a>
</li>
<li class="item">
<a href="#">
<div class="item-wrap">
<div class="img"><img data-src="https://gtd.alicdn.com/sns_logo/i7/TB1TlOfQFXXXXX2XXXXwu0bFXXX.png_240x240xz.jpg" src="https://img.alicdn.com/tps/i3/T1QYOyXqRaXXaY1rfd-32-32.gif"></div>
<div class="info">
<span class="name">程茜如</span>
<span class="city">广州市</span>
</div>
<div class="info row2">
<span>170CM / 47KG</span>
<span class="fr"><i class="iconfont">👍</i>257742</span>
</div>
</div>
</a>
</li>
<li class="item">
<a href="#">
<div class="item-wrap">
<div class="img"><img data-src="https://gtd.alicdn.com/sns_logo/i1/TB1SKu.QpXXXXbDXVXXSutbFXXX.jpg_240x240xz.jpg" src="https://img.alicdn.com/tps/i3/T1QYOyXqRaXXaY1rfd-32-32.gif"></div>
<div class="info">
<span class="name">何小蕊</span>
<span class="city">杭州市</span>
</div>
<div class="info row2">
<span>168CM / 48KG</span>
<span class="fr"><i class="iconfont">👍</i>251115</span>
</div>
</div>
</a>
</li>
<li class="item">
<a href="#">
<div class="item-wrap">
<div class="img"><img data-src="https://gtd.alicdn.com/sns_logo/i2/TB17gJ3OXXXXXcrXpXXSutbFXXX.jpg_240x240xz.jpg" src="https://img.alicdn.com/tps/i3/T1QYOyXqRaXXaY1rfd-32-32.gif"></div>
<div class="info">
<span class="name">小造片</span>
<span class="city">杭州市</span>
</div>
<div class="info row2">
<span>166CM / 45KG</span>
<span class="fr"><i class="iconfont">👍</i>242858</span>
</div>
</div>
</a>
</li>
<li class="item">
<a href="#">
<div class="item-wrap">
<div class="img"><img data-src="https://gtd.alicdn.com/sns_logo/i8/TB1um5GQpXXXXbiaXXXSutbFXXX.jpg_240x240xz.jpg" src="https://img.alicdn.com/tps/i3/T1QYOyXqRaXXaY1rfd-32-32.gif"></div>
<div class="info">
<span class="name">一柳hz</span>
<span class="city">杭州市</span>
</div>
<div class="info row2">
<span>168CM / 46KG</span>
<span class="fr"><i class="iconfont">👍</i>227222</span>
</div>
</div>
</a>
</li>
<li class="item">
<a href="#">
<div class="item-wrap">
<div class="img"><img data-src="https://gtd.alicdn.com/sns_logo/i1/TB1pxCTQpXXXXa2apXXSutbFXXX.jpg_240x240xz.jpg" src="https://img.alicdn.com/tps/i3/T1QYOyXqRaXXaY1rfd-32-32.gif"></div>
<div class="info">
<span class="name">陶学洲</span>
<span class="city">杭州市</span>
</div>
<div class="info row2">
<span>169CM / 48KG</span>
<span class="fr"><i class="iconfont">👍</i>217663</span>
</div>
</div>
</a>
</li>
<li class="item">
<a href="#">
<div class="item-wrap">
<div class="img"><img data-src="https://gtd.alicdn.com/sns_logo/i6/TB1zksMNVXXXXaRapXXSutbFXXX.jpg_240x240xz.jpg" src="https://img.alicdn.com/tps/i3/T1QYOyXqRaXXaY1rfd-32-32.gif"></div>
<div class="info">
<span class="name">晨子cz</span>
<span class="city">杭州市</span>
</div>
<div class="info row2">
<span>168CM / 45KG</span>
<span class="fr"><i class="iconfont">👍</i>213423</span>
</div>
</div>
</a>
</li>
<li class="item">
<a href="#">
<div class="item-wrap">
<div class="img"><img data-src="https://gtd.alicdn.com/sns_logo/i4/TB1nbrcOXXXXXXEXpXXSutbFXXX.jpg_240x240xz.jpg" src="https://img.alicdn.com/tps/i3/T1QYOyXqRaXXaY1rfd-32-32.gif"></div>
<div class="info">
<span class="name">大素儿</span>
<span class="city">杭州市</span>
</div>
<div class="info row2">
<span>162CM / 44KG</span>
<span class="fr"><i class="iconfont">👍</i>211507</span>
</div>
</div>
</a>
</li>
<li class="item">
<a href="#">
<div class="item-wrap">
<div class="img"><img data-src="https://gtd.alicdn.com/sns_logo/i4/TB1CI_NQpXXXXXaXVXXSutbFXXX.jpg_240x240xz.jpg" src="https://img.alicdn.com/tps/i3/T1QYOyXqRaXXaY1rfd-32-32.gif"></div>
<div class="info">
<span class="name">杨爱米</span>
<span class="city">杭州市</span>
</div>
<div class="info row2">
<span>170CM / 49KG</span>
<span class="fr"><i class="iconfont">👍</i>210294</span>
</div>
</div>
</a>
</li>
<li class="item">
<a href="#">
<div class="item-wrap">
<div class="img"><img data-src="https://gtd.alicdn.com/sns_logo/i2/TB18vTdQFXXXXXlXpXXwu0bFXXX.png_240x240xz.jpg" src="https://img.alicdn.com/tps/i3/T1QYOyXqRaXXaY1rfd-32-32.gif"></div>
<div class="info">
<span class="name">金婷</span>
<span class="city">杭州市</span>
</div>
<div class="info row2">
<span>168CM / 48KG</span>
<span class="fr"><i class="iconfont">👍</i>207124</span>
</div>
</div>
</a>
</li>
<li class="item">
<a href="#">
<div class="item-wrap">
<div class="img"><img data-src="https://gtd.alicdn.com/sns_logo/i7/TB1doDVQpXXXXcRaXXXSutbFXXX.jpg_240x240xz.jpg" src="https://img.alicdn.com/tps/i3/T1QYOyXqRaXXaY1rfd-32-32.gif"></div>
<div class="info">
<span class="name">雪莉sori</span>
<span class="city">杭州市</span>
</div>
<div class="info row2">
<span>165CM / 45KG</span>
<span class="fr"><i class="iconfont">👍</i>204574</span>
</div>
</div>
</a>
</li>
<li class="item">
<a href="#">
<div class="item-wrap">
<div class="img"><img data-src="https://gtd.alicdn.com/sns_logo/i1/TB17LgBNFXXXXaSXVXXSutbFXXX.jpg_240x240xz.jpg" src="https://img.alicdn.com/tps/i3/T1QYOyXqRaXXaY1rfd-32-32.gif"></div>
<div class="info">
<span class="name">沈小妍</span>
<span class="city">杭州市</span>
</div>
<div class="info row2">
<span>165CM / 44KG</span>
<span class="fr"><i class="iconfont">👍</i>204285</span>
</div>
</div>
</a>
</li>
<li class="item">
<a href="#">
<div class="item-wrap">
<div class="img"><img data-src="https://gtd.alicdn.com/sns_logo/i6/TB1fVJJQFXXXXcyXpXXSutbFXXX.jpg_240x240xz.jpg" src="https://img.alicdn.com/tps/i3/T1QYOyXqRaXXaY1rfd-32-32.gif"></div>
<div class="info">
<span class="name">模特雪梨</span>
<span class="city">杭州市</span>
</div>
<div class="info row2">
<span>165CM / 47KG</span>
<span class="fr"><i class="iconfont">👍</i>201566</span>
</div>
</div>
</a>
</li>
</ul>
</div>
</body>
<script>
const io = new IntersectionObserver(callback);
let imgs = document.querySelectorAll('[data-src]');
function callback(entries){
entries.forEach((item) => {
if(item.isIntersecting){
item.target.src = item.target.dataset.src
io.unobserve(item.target)
}
})
}
imgs.forEach((item)=>{
io.observe(item)
})
</script>
</html>
