0

很简单的问题：

如果它们是显示：无，我可以强制浏览器不下载任何图像或其他资源，但是当显示切换到内联时当然下载？

这里是概念：一个包含许多幻灯片作为图像的演讲演示，默认情况下都设置为 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;
   });
}
4

2 回答 2

5

更新您的 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;
    });
}
于 2013-01-30T07:04:12.600 回答
0

这就是我最终要做的。

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 应用于图形标签。

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

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

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

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

于 2013-02-04T23:17:45.753 回答