js获取所有图片

在JavaScript中获取所有图片，可以根据图片所处的不同位置采用不同的方法：

一、获取页面中已加载的img标签图片

1. 基础概念
   • 在HTML中，<img>标签用于显示图片。可以通过JavaScript的DOM（Document Object Model）操作来获取这些图片元素。

• 代码示例
  • 使用document.getElementsByTagName方法：
  • 使用document.getElementsByTagName方法：
  • 或者使用document.querySelectorAll方法（更现代和灵活）：
  • 或者使用document.querySelectorAll方法（更现代和灵活）：
• 优势
  • 简单直接，适用于快速获取页面上的图片元素进行一些基本操作，如统计图片数量、修改图片属性等。
• 应用场景
  • 图片懒加载优化：在页面加载时先获取所有图片元素，然后根据滚动位置动态加载可视区域内的图片。
  • 图片预加载：获取所有图片后，可以提前加载部分重要图片以提高用户体验。

二、获取通过CSS背景图片设置的图片（相对复杂）

1. 基础概念
   • 有些图片是通过CSS的background - image属性设置在元素的背景中的，这种情况下不能直接像获取<img>标签那样获取图片。需要遍历元素并解析其CSS样式。

• 代码示例
  • 以下是一个简单示例，遍历页面中的所有元素并检查其背景图片：
  • 以下是一个简单示例，遍历页面中的所有元素并检查其背景图片：
• 优势
  • 能全面获取页面中以任何形式存在的图片资源，无论是<img>标签还是背景图片。
• 应用场景
  • 全面的图片资源管理，例如统计页面中所有图片（包括背景图）的大小、格式等信息，用于优化页面加载性能。

三、如果是从服务器获取图片列表（假设图片存储在服务器上）

1. 基础概念
   • 如果知道图片存储在服务器上的某个目录结构下，可以通过与服务器交互（如发送HTTP请求）来获取图片的列表信息。这可能涉及到服务器端的脚本（如使用Node.js、Python等编写API）来读取目录内容并返回给前端JavaScript。

• 代码示例（假设服务器提供了一个获取图片列表的API）
  • 使用fetch API：
  • 使用fetch API：
• 优势
  • 可以获取服务器上存储的所有图片，而不仅仅是已经加载到页面中的图片，适用于图片管理后台等功能。
• 应用场景
  • 图片库管理系统，管理员可以通过前端界面查看服务器上存储的所有图片并进行管理操作，如删除、重命名等。