检查 HTML 图片元素中加载了什么图像答案

【问题标题】：Check what image was loaded in HTML picture element检查 HTML 图片元素中加载了什么图像
【发布时间】：2021-06-12 18:17:48
【问题描述】：

我的应用中有以下代码：

<picture>
    <source media="(max-width: 1300px)" srcSet={src.img['1']} />
    <source media="(max-width: 1599px)" srcSet={src.img['2']} />
    <source media="(max-width: 2049px)" srcSet={src.img['3']} />
</picture>

是否有可能以编程方式检查浏览器在图片元素中加载了哪些图像？我必须再次使用该图像（现在我在工具提示中默认使用 img['1']），但我想避免再次加载图像。

【问题讨论】：

一种解决方案是从您的图像中设置过期日期，然后克隆它。你应该看看这里：stackoverflow.com/questions/10365527/…
这是一个属性 current src : stackoverflow.com/questions/34366100/…

标签： javascript html css

【解决方案1】：

通常我只是打开控制台，然后将这段代码放在那里。

console.log( img.src )

请记住，尽管您可以使用带有 JPG 回退的 WebP 等现代图像，但如果支持 WebP，它将不会回退。

另外你需要先选择元素，否则你会得到未定义的图像。

【讨论】：