<ul>
  <li><img src="//www.baidu.com/img/bd_logo1.png?where=super"></li>
</ul>
<footer>Loading...</footer>
li {
  list-style: none;
}
View Compiled
const Observer = new IntersectionObserver(lazyload, { threshold: 1 });
// 监听是否滚动到底部
Observer.observe(document.querySelector('footer'));

// 滚动到底部则插入新的图片
function lazyload() {
  const src = "//www.baidu.com/img/bd_logo1.png?where=super";
  const item = `<li><img src="${src}"></li>`;
  document.querySelector("ul").insertAdjacentHTML('beforeend', item.repeat(2));
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.