ビューエアドロップ:簡単でシンプルな方法

レイジーローディング(Lazy Loading): ページが読み込まれる際に、画像や動画などの重いコンテンツを遅延して読み込むことで、ページの表示速度を向上させます。以下はJavaScriptを使用したレイジーローディングのコード例です。

const images = document.querySelectorAll('img[data-src]');
function lazyLoad() {
  images.forEach(image => {
    if (image.getBoundingClientRect().top < window.innerHeight) {
      image.src = image.dataset.src;
      image.onload = () => {
        image.removeAttribute('data-src');
      };
    }
  });
}
window.addEventListener('scroll', lazyLoad);

インフィニットスクロール(Infinite Scrolling): ユーザーがページの最下部にスクロールすると、自動的に追加のコンテンツを読み込む方法です。これにより、ユーザーはページを更新せずにコンテンツを続けて閲覧することができます。以下はjQueryを使用したインフィニットスクロールのコード例です。

$(window).scroll(function() {
  if ($(window).scrollTop() >= $(document).height() - $(window).height() - 100) {
    // 追加コンテンツを読み込む処理
  }
});