IntersectionObserver是个异步方法,使用者不必过多的关注它内部具体计算过程,应用场景如:以前我们在做图片懒加载时候需要借助插件,或者手动去计算元素是否在视窗内,反正我是记不住具体怎么算,每次都是百度一遍套公式,自从发现了IntersectionObserver,一切是变得如此的简单,不单单是通过它可以进行懒加载图片,例如很多公司需要做元素进屏展示统计等等,它都将能胜任。
api基本格式
兼容性
最好的教程莫过于一个小demo(兄弟你懂了吗?,图片太大,我就直接复制代码了)
<!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/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>
</html>
当前位置: 前端开发 > JavaScript > 认识IntersectionObserver交叉口观察者(懒加载、预加载)
认识IntersectionObserver交叉口观察者(懒加载、预加载)
2020-03-07 分类:JavaScript 作者:管理员 阅读(2403)
IntersectionObserver是个异步方法,使用者不必过多的关注它内部具体计算过程,应用场景如:以前我们在做图片懒加载时候需要借助插件,或者手动去计算元素是否在视窗内,反正我是记不住具体怎么算,每次都是百度一遍套公式,自从发现了IntersectionObserver,一切是变得如此的简单,不单单是通过它可以进行懒加载图片,例如很多公司需要做元素进屏展示统计等等,它都将能胜任。
api基本格式
1 | var io = new IntersectionObserver(changes => { |
兼容性
最好的教程莫过于一个小demo
1 | <!DOCTYPE html> |
js部分
兼容性
IE都趴下了,现在的主浏览器基本都支持,可能有的用户老版本的不支持。解决方案有两个,第一,有对应的插件IntersectionObserver polyfill,第二,其实如果只是做图片懒加载的话,那在不支持的时候直接展示也就可以了,直接循环所有图片标签,把data-src数据赋值到真正的src即可。当然,如果你用这个做无限下拉那就不能这么干。
小结
截止目前兼容性已达到90%+,我相信在实际项目中你是可以值得一试的。温馨提示:为了更好的体验下面demo图片懒加载技术效果了解它的工作过程,你应该将浏览器网速降低到至3G等模式,具体可百度。