五分钟分享1
需积分: 0 189 浏览量
2022-08-03
14:34:42
上传
评论
收藏 109KB PDF 举报
五分钟分享五分钟分享-- 图片的延迟加载小探讨图片的延迟加载小探讨
1.元素进入可视窗口才加载元素进入可视窗口才加载
1.1 比较比较 item.getBoundingClientRect().top与视窗底线与视窗底线 top的大小的大小demo；；
核心点： object.getBoundingClientRect() ： 获取元素的大小及其相对于视口的位置
// 用于滚动的容器
var $container = document.querySelector('.wrapper');
// 容器的下边框的offsetheight，当容器的下边框不在可视区域之内是，屏幕高度作为下边框
var bottomOffset = Math.min($container.getBoundingClientRect().bottom,window.innerHeight);
// 需要用于更新的元素
var items = [...document.querySelectorAll('.item')];
// 更新页面上的元素
function update(){
items.forEach(item=>{
// 元素进入视野，且没有进行处理过
if(item.getBoundingClientRect().top <= bottomOffset &&
!item.classList.contains('loaded')){
var img = item.querySelector('img');
img.setAttribute('src',img.getAttribute('link'));
item.classList.add('loaded');
}
});
}
// 滚动及页面加载完成也进行处理
update();
$container.addEventListener('scroll',()=>{
update();
});
1.2 IntersectionObserver进行监视；进行监视；demo
IntersectionObserver : 监视某个元素是否滚动进了浏览器窗口的可视区域（视口）或者滚动进了它的某个祖先元素的可视区域内 核心点：
let observer = new IntersectionObserver((changes) => {
changes.forEach((change) => {
评论0