使用JavaScript进行资源加载与性能优化实践

<!-- 将图片的src属性替换为data-src -->
<img data-src="image.jpg" alt="Image">

<script>
  // 页面加载完成后，再加载延迟加载的资源
  document.addEventListener('DOMContentLoaded', function() {
    const images = document.querySelectorAll('img[data-src]');
    images.forEach(function(image) {
      image.src = image.getAttribute('data-src');
    });
  });
</script>

<!-- 预加载CSS文件 -->
<link rel="preload" href="styles.css" as="style">

<!-- 预加载JavaScript文件 -->
<link rel="preload" href="script.js" as="script">

<!-- 预加载图片 -->
<link rel="preload" href="image.jpg" as="image">

<!-- 将图片的src属性替换为占位图 -->
<img src="placeholder.jpg" data-src="image.jpg" alt="Image">

<script>
  // 判断图片是否进入可视区域，如果是则加载图片
  function lazyLoad() {
    const images = document.querySelectorAll('img[data-src]');
    images.forEach(function(image) {
      const rect = image.getBoundingClientRect();
      if (rect.top < window.innerHeight) {
        image.src = image.getAttribute('data-src');
        image.removeAttribute('data-src');
      }
    });
  }

  // 监听滚动事件，触发懒加载
  document.addEventListener('scroll', lazyLoad);
</script>