javascript - 有没有办法只在显示不为无时加载图像？

Question

非常简单的问题:

我可以强制浏览器不下载任何显示为“无”的图像或其他资源，但是当显示切换为内联时当然会下载吗？

这个概念是这样的:一个包含许多幻灯片的讲座演示，图像全部设置为默认显示:无，然后当视频达到特定时间索引时更改为显示:内联。即使未显示，浏览器仍会尝试加载所有图像，这可能会导致应在幻灯片图像之后加载的视频或元素挂起。

我有一系列这些:

<figure class="lectureNotCurrent" data-start="0" data-end="259">
<a href="img1_large.JPG" target="_blank">
<img src="img1_large.JPG" class="lectureSlidesImg" /></a></figure>

编辑 - 应该有效吗？

<img data-src=/path/to/img.png src="">

//js
loadNextImages() {
   document.querySelectorAll("#slidesContainer footer").map(function () {
       this.getElementsByTagName('img').src = this.getElementsByTagName('img').dataset.src;
       delete this.dataset.src;
   });
}

Answer 1

更新您的 html，使隐藏图像没有 src(或者例如将一个透明像素文件作为源)并使用 data-src并在显示时更改 src:

<img data-src=/path/to/img.png src="">

//js
loadNextImages() {
    document.querySelectorAll("#container img").map(function () {
        this.src = this.dataset.src;
        delete this.dataset.src;
    });
}