当前位置：首页 > JavaScript

js实现图片加载

2026-02-28 22:01:21JavaScript

使用 `Image` 对象加载图片

通过创建 Image 对象动态加载图片，适合预加载或动态插入场景。

const img = new Image();
img.src = 'path/to/image.jpg';
img.onload = function() {
  console.log('图片加载完成');
  document.body.appendChild(img); // 插入到DOM
};
img.onerror = function() {
  console.error('图片加载失败');
};

通过 `fetch` 加载二进制图片数据

适用于需要处理二进制数据或通过API获取图片的场景。

fetch('path/to/image.jpg')
  .then(response => response.blob())
  .then(blob => {
    const imgUrl = URL.createObjectURL(blob);
    const img = document.createElement('img');
    img.src = imgUrl;
    document.body.appendChild(img);
  })
  .catch(error => console.error('加载失败:', error));

监听现有 `img` 标签的加载状态

直接为DOM中的 img 标签添加事件监听器。

<img id="myImage" src="path/to/image.jpg" alt="示例图片">
<script>
  const img = document.getElementById('myImage');
  img.addEventListener('load', () => console.log('DOM图片加载完成'));
  img.addEventListener('error', () => console.log('DOM图片加载失败'));
</script>

图片懒加载实现

结合 IntersectionObserver 实现滚动懒加载，提升页面性能。

const lazyImages = document.querySelectorAll('img[data-src]');
const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src;
      observer.unobserve(img);
    }
  });
});
lazyImages.forEach(img => observer.observe(img));

HTML需配合 data-src 属性：

<img data-src="path/to/lazy-image.jpg" alt="懒加载图片">

预加载多张图片

通过 Promise.all 批量预加载图片资源。

const preloadImages = (urls) => {
  return Promise.all(
    urls.map(url => 
      new Promise((resolve, reject) => {
        const img = new Image();
        img.src = url;
        img.onload = resolve;
        img.onerror = reject;
      })
    )
  );
};
preloadImages(['image1.jpg', 'image2.jpg'])
  .then(() => console.log('所有图片加载完成'))
  .catch(err => console.error('部分图片加载失败', err));