当显示不是没有时,有没有办法只加载图像？

Question

非常简单的问题:

我是否可以强制浏览器下载任何图像或其他资源(如果显示:none),当然,当显示切换到内联时,当然会下载吗？

这是一个概念:一个讲座演示文稿,其中包含许多幻灯片,所有图片都设置为显示:默认情况下为none,然后更改为显示:当视频达到特定时间索引时内联.浏览器仍会尝试加载所有图像,即使它们未显示可能导致视频挂起或幻灯片图像后应加载的元素.

我有一系列这些:

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