图片懒加载

by Boyanliuu

HTML

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>倒计时</title>
    </head>
    <body>
    <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo tempore deleniti nam impedit amet magni autem ipsa odio dicta ex excepturi voluptatem, in, culpa voluptas? Vel, omnis delectus illo. Velit!
    </p>
        <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo tempore deleniti nam impedit amet magni autem ipsa odio dicta ex excepturi voluptatem, in, culpa voluptas? Vel, omnis delectus illo. Velit!
    </p>
        <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo tempore deleniti nam impedit amet magni autem ipsa odio dicta ex excepturi voluptatem, in, culpa voluptas? Vel, omnis delectus illo. Velit!
    </p>
        <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo tempore deleniti nam impedit amet magni autem ipsa odio dicta ex excepturi voluptatem, in, culpa voluptas? Vel, omnis delectus illo. Velit!
    </p>
        <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo tempore deleniti nam impedit amet magni autem ipsa odio dicta ex excepturi voluptatem, in, culpa voluptas? Vel, omnis delectus illo. Velit!
    </p>
        <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo tempore deleniti nam impedit amet magni autem ipsa odio dicta ex excepturi voluptatem, in, culpa voluptas? Vel, omnis delectus illo. Velit!
    </p>
        <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo tempore deleniti nam impedit amet magni autem ipsa odio dicta ex excepturi voluptatem, in, culpa voluptas? Vel, omnis delectus illo. Velit!
    </p>
        <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo tempore deleniti nam impedit amet magni autem ipsa odio dicta ex excepturi voluptatem, in, culpa voluptas? Vel, omnis delectus illo. Velit!
    </p>
        <p>
    Lorem ipsum dolor sit amet,...

CSS

body{
  padding: 0 40px;
}
p{
  font-size:25px;
}

JavaScript

const images =  document.querySelectorAll('img');

// 这个情况下 滚动会触发很多次
//即使图片已经加载了 还是回不断触发事件
//    <img data-src ="https://cdn.pixabay.com/photo/2018/01/05/02/47/fishing-3062034_960_720.jpg">
/* window.addEventListener('scroll', (e) =>{
    images.forEach(image =>{
      const imageTop =  image.getBoundingClientRect().top;
      //图片可以开始加载了, html 使用了 data-src 这样子他就不会提前加载图片了
      if(imageTop < window.innerHeight){
        const data_src = image.getAttribute('data-src');
        image.setAttribute('src',data_src);
      }
      console.log('触发')
      
    });
}) */


// 回调函数接受一个参数
const callback = (entries) =>{
		entries.forEach(entry =>{
    		//为true 证明 正在观察这个 element我们可以把它展示出来了
    		if(entry.isIntersecting){
        	const image = entry.target;
          const data_src = image.getAttribute('data-src');
        	image.setAttribute('src',data_src);
          // 如果已经加载了  就不再触发 观察了
          observer.unobserve(image);
          console.log('触发')
        
        }
    });

};

const observer =  new IntersectionObserver(callback);

// 每一个元素都需要被观察着
images.forEach(image =>{
	observer.observe(image);
});