有没有一种方法可以只在显示不为空时加载图像？

Question

很简单的问题：

如果显示，我是否可以强制浏览器不下载任何图像或其他资源：无，但是当显示切换为嵌入式时，当然可以下载？

这里是一个概念：一个演讲演示文稿，其中有许多幻灯片作为图像，默认情况下全部设置为display：none，然后在视频达到特定时间索引时更改为display：inline。 即使未显示所有图像，浏览器仍会尝试加载所有图像，这可能会导致视频或应在幻灯片图像之后加载的元素死机。

我有一系列的这些：

<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;
    });
}

Answer 2

这就是我最终要做的。

HTML

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

在运行幻灯片计时的函数中，我添加了变量：

var imgNames = document.getElementsByClassName('lectureSlidesImg');

然后，我在代码部分（“ for”循环）中添加了此声明，该声明根据视频的当前时间在正确的时间将display：inline应用于Figure标签。

imgNames[i].src = imgNames[i].getAttribute('data-src');

因此，除了显示有问题的图形标签之外，它还将获取有问题的图像的data-src值并将其插入src属性。 然后加载图像。

data- *自定义属性背后有很多功能。 很高兴我了解了这些。

但是，人们会认为display：none应该阻止加载内容，除非更改了显示。