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

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：根据视频的当前时间在正确的时刻内联到数字标签。

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

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

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

然而，人们会认为显示：none应该阻止加载内容，除非显示被更改。

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

2 个答案: