Javascript 是否有办法仅在显示不为“无”时加载图像？

非常简单的问题：

我是否可以强制浏览器在显示时不下载任何图像或其他资源：无，但当显示切换为内联时当然可以下载

这是一个概念：一个包含许多幻灯片和图像的演讲，所有幻灯片都设置为显示：默认情况下无，然后在视频达到某个时间索引时更改为显示：内联。浏览器仍会尝试加载所有图像，即使这些图像未显示，这可能会导致视频或幻灯片图像后应加载的元素挂起

我有一系列的建议：

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

//js
loadNextImages（）{
document.queryselectoral（“#slidecontainer footer”）.map（函数（）{
this.getElementsByTagName（'img'）.src=this.getElementsByTagName（'img'）.dataset.src；
删除this.dataset.src；
});
}

更新html，使隐藏图像不具有

src

（例如，使用一个透明像素文件作为源），并使用

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

//js
loadNextImages（）{
document.queryselectoral（“#container img”）.map（函数（）{
this.src=this.dataset.src；
删除this.dataset.src；
});
}

更新html，使隐藏图像不具有

src

（例如，使用一个透明像素文件作为源），并使用

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

//js
loadNextImages（）{
document.queryselectoral（“#container img”）.map（函数（）{
this.src=this.dataset.src；
删除this.dataset.src；
});
}

以下是我最后做的事情

HTML

然后，我在代码部分（一个“for”循环）中添加了这条语句，根据视频的当前时间，在正确的时刻将display:inline应用于figure标记

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

因此，除了显示有问题的figure标记外，它还将获取有问题图像的数据src值，并将其插入src属性中。然后加载图像

数据-*自定义属性背后有很多功能。很高兴我知道了这些

---

然而，有人会认为，显示：除非显示被改变，否则不应阻止加载内容。

以下是我最后要做的

HTML

然后，我在代码部分（一个“for”循环）中添加了这条语句，根据视频的当前时间，在正确的时刻将display:inline应用于figure标记

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

因此，除了显示有问题的figure标记外，它还将获取有问题图像的数据src值，并将其插入src属性中。然后加载图像

数据-*自定义属性背后有很多功能。很高兴我知道了这些

---

然而，有人会认为，显示：除非显示发生变化，否则不应阻止加载内容。

您是否在使用JavaScript？@ExplosionPills是的，这很好，我对JS很满意。我认为浏览器已经自动完成了。至少在Opera on slow connections中，当图像可见时，您可以“感觉”到图像是第一次加载的。您是否在使用JavaScript？@ExplosionPills是的，这很好，我对JS很满意。我想浏览器已经自动加载了。至少在Opera on slow connections中，当图像可见时，您可以“感觉”到图像是第一次加载的。Ok。我明白这是怎么回事了。data src是一个真正的属性还是我必须先创建它？@fredsbend*-attributes使用我正在使用的实际代码查看我的编辑。计时代码位于地物标记的数据-*中。如何在不改变结构的情况下应用此函数？如有必要，我可以更改结构，但我不愿意。@fredsbend您必须更改，因为您必须从

中删除

src

属性。如果你不这样做，图像将被下载，没有办法。是的，我知道。我的意思是除此之外，添加数据src属性。javascript如何知道何时运行该函数？我该把它放在哪里？如果视频在data-*figure tags.Ok中设置的时间内，我只希望加载图像。我明白这是怎么回事了。data src是一个真正的属性还是我必须先创建它？@fredsbend*-attributes使用我正在使用的实际代码查看我的编辑。计时代码位于地物标记的数据-*中。如何在不改变结构的情况下应用此函数？如有必要，我可以更改结构，但我不愿意。@fredsbend您必须更改，因为您必须从

中删除

src

属性。如果你不这样做，图像将被下载，没有办法。是的，我知道。我的意思是除此之外，添加数据src属性。javascript如何知道何时运行该函数？我该把它放在哪里？如果视频在data-*figure标记中设置的时间内，我只希望加载图像。