html批量加载图片

使用JavaScript动态创建图片标签

通过循环遍历图片路径数组,动态生成<img>标签并插入DOM中。

images.forEach(src => {
const img = document.createElement(‘img’)
img.src = src
img.alt = ‘描述文字’ // 建议添加alt属性
container.appendChild(img)
})

 方法二：懒加载实现（Intersection Observer API）
当图片进入视口时才加载，提升首屏渲染速度。
| 参数配置 | 代码示例 | 作用 |
|----------|----------|------|
| 监听容器 | `const observer = new IntersectionObserver(entries => { ... }, { root: container })` | 观察图片容器区域 |
| 图片占位 | ```html
<div class="placeholder" data-src="img1.jpg"></div>
``` | 使用占位符模拟图片位置 |
| 加载逻辑 | ```js
observer.forEach(entry => {
  if(entry.isIntersecting){
    const placeholder = entry.target
    const img = document.createElement('img')
    img.src = placeholder.dataset.src
    placeholder.replaceWith(img)
    observer.unobserve(placeholder)
  }
})
``` | 替换占位符为真实图片 |
 方法三：使用`<picture>`实现响应式加载
根据设备分辨率加载不同尺寸图片，优化移动端体验。
| 语法结构 | 代码示例 | 说明 |
|----------|----------|------|
| 基础结构 | ```html
<picture>
  <source media="(min-width:768px)" srcset="medium.jpg">
  <source media="(min-width:1200px)" srcset="large.jpg">
  <img src="small.jpg" alt="响应式图片">
</picture>
``` | 定义多套图片规则 |
| 批量处理 | 配合JavaScript动态生成`<source>`标签 | 适合需要动态调整的场景 |
 性能优化建议
1. 图片压缩：使用TinyPNG等工具压缩体积
2. 格式转换：优先使用WebP格式（需检测浏览器支持）
3. CDN加速：将图片存储至对象存储并开启CDN分发
4. 缓存策略：设置合理的Cache-Control头信息
 常见问题与解答
Q1：如何防止图片加载失败影响页面布局？  
A：可设置图片容器固定宽高，或使用CSS的`background-image`属性替代，同时添加`onerror`事件处理：
```js
img.onerror = function() {
  this.src = 'fallback.png' // 备用图片
}

Q2：批量加载时如何控制并发数量？
A：采用异步加载队列，例如使用Promise.all限制同时加载数：

const loadImages = async (urls) => {
  const chunks = [] // 分批次存储Promise
  for(let i=0; i<urls.length; i+=5){ // 每批5个
    const chunk = urls.slice(i, i+5).map(url => {
      return new Promise(resolve => {
        const img = new Image()
        img.onload = () => resolve(img)
        img.src = url
      })
    })
    chunks.push(Promise.all(chunk))
  }
  return Promise.all(chunks).then(res => res.flat())
}