<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
        <title></title>
        
    </head>
   <div id="info">
      图片在页面底部，仍未加载，请向下滚动
      <br/>
      图片在进入窗口120px 的时候延加载
   </div>
  <div id="container">
    <div class="content"></div>
    <img id="img" src="data:image/webp;base64,UklGRiQAAABXRUJQVlA4IBgAAAAwAQCdASoBAAEAAwA0JaQAA3AA/vuUAAA=" data-src="https://shuliqi.github.io/xiaozhan/1.jpeg">
     <div class="content"></div>
  </div>
    
    
</html>
 #info {
  position: fixed;
  margin: 0 auto;
 }

 #img {
   width: 100px;
   height: 100px;
   border: 10px solid #000;
   
 }
.content{
  width: 100%;
  height: 700px;
}
#container {
  width: 300px;
  height: 500px;
  overflow: auto;
  border: 2px solid #95ff00;
}
let observer = new IntersectionObserver((entries) => {
  if(entries[0].isIntersecting) {
     observer.unobserve(img);
     info.textContent = "开始加载图片！";
     img.src = img.dataset.src;
  }
 }, {
  root: document.getElementById("container"),
  rootMargin: "-120px"
 })

 observer.observe(document.getElementById("img"))

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.