用jQuery实现基于滚动位置的图像源增量

<img class="lazy-image" data-src="image.jpg" alt="Image">

.lazy-image {
  width: 100%;
  height: auto;
  background: #ccc;
}

$(window).on('scroll', function() {
  $('.lazy-image').each(function() {
    if (isElementInViewport(this) && !$(this).attr('src')) {
      $(this).attr('src', $(this).data('src'));
    }
  });
});

function isElementInViewport(element) {
  var rect = element.getBoundingClientRect();
  return (
    rect.top >= 0 &&
    rect.left >= 0 &&
    rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
    rect.right <= (window.innerWidth || document.documentElement.clientWidth)
  );
}