为已上线项目的图片添加 data-src，如何优化？
问题:
项目上线后，想要添加图片懒加载功能，如何高效地为页面中现有的图片添加 data-src 属性？一种常见的做法是遍历页面上的所有 img 元素，但这样做效率较低。
解决方案:
为了更有效地添加 data-src 属性，可以使用更巧妙的方法：
向后端请求图片尺寸信息:
修改后端代码，让其返回图片的原始宽高。然后，前端可以通过 ajax 或其他方式向后端请求这些信息。
遍历图片列表，添加 data-src:
获取到图片尺寸信息后，遍历页面中的图片列表。对于每个图片，根据其尺寸计算合适的 srcset，并将其作为 data-src 属性值。
优点:
这种方法的好处是：
- 无需遍历页面所有元素，效率更高。
- 可以根据图片尺寸生成最合适的 srcset，提高懒加载效果。
代码示例:
function addDataSrc(images) {
// 向后端请求图片尺寸信息
const data = await fetch(`/image-info?ids=${images.join(",")}`);
// 遍历图片列表，添加 data-src
for (let img of images) {
const info = data.find(i => i.id === img.id);
if (info) {
img.dataset.src = generateSrcSet(info.width, info.height);
}
}
}通过使用这种方法，可以更高效地为已上线项目的图片添加 data-src 属性，从而实现图片懒加载功能。
