html多图片加载

多图片加载基础实现

在HTML中直接放置多个<img>标签是最基础的方式，但需注意图片路径管理和DOM操作效率。

<div class="image-container">
<img src="image1.jpg" alt="图片1">
<img src="image2.jpg" alt="图片2">
<img src="image3.jpg" alt="图片3">
</div>

动态加载图片（JavaScript）

通过数组存储图片路径,循环生成图片元素并插入DOM：

const images = ['img1.jpg', 'img2.jpg', 'img3.jpg'];
const container = document.querySelector('.image-container');
images.forEach(src => {
  const img = document.createElement('img');
  img.src = src;
  img.alt = `图片${src.split('.')[0]}`;
  container.appendChild(img);
});

懒加载实现（Intersection Observer）

当图片进入视口时才加载,提升首屏渲染速度：

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;
      img.removeAttribute('data-src');
      observer.unobserve(img);
    }
  });
});
lazyImages.forEach(img => observer.observe(img));

HTML结构需使用data-src属性：

<img data-src="large-image.jpg" alt="懒加载图片" style="width:300px">

预加载图片（Prefetch）

提前加载资源到缓存,适合即将展示的图片：

const preloadImages = ['preload1.jpg', 'preload2.jpg'];
preloadImages.forEach(src => {
  const img = new Image();
  img.src = src;
});

或使用<link rel="preload">：

<link rel="preload" href="high-res-image.jpg" as="image">

响应式图片处理

根据设备像素密度加载合适图片：

<picture>
  <source srcset="image-400.jpg" media="(min-width: 800px)">
  <source srcset="image-200.jpg" media="(min-width: 400px)">
  <img src="image-100.jpg" alt="响应式图片">
</picture>

图片加载动画与占位符

使用CSS实现加载过渡效果：

img {
  opacity: 0;
  transition: opacity 0.5s;
}
img.loaded {
  opacity: 1;
}

配合JavaScript添加类：

const img = document.querySelector('img');
img.onload = () => img.classList.add('loaded');

占位符方案（减少布局跳动）：

<div class="placeholder" style="padding-top: 56.25%"></div>
<noscript>
  <img src="fallback.jpg" alt="占位符">
</noscript>

图片加载错误处理

设置备选方案和错误提示：

<img src="main.jpg" alt="主图" onerror="this.src='fallback.jpg'; this.alt='备用图'">

或使用JavaScript监听：

const img = document.querySelector('.important-img');
img.addEventListener('error', () => {
  img.src = 'error-image.png';
  img.alt = '加载失败，已切换备用图';
});

相关问题与解答

Q1：懒加载和预加载的区别是什么？
A1：懒加载是延迟加载视口外的图片，优先渲染首屏内容；预加载是提前加载未来可能需要的资源，两者目的相反，懒加载节省初始流量，预加载提升后续体验。

Q2：如何优化移动端多图页面的加载速度？
A2：1. 使用webp等现代格式压缩图片；2. 设置src为小尺寸图片，用srcset提供高分辨率版本；3. 启用浏览器缓存；4. 对非首屏图片启用懒加载；5. 合并