javascript - 如何强制浏览器下载和缓存当前未显示在页面上的图像

Question

<分区>

Answer 1

只需将它们全部加载为隐藏图像即可。

CSS:

.hidden {
    display:none;
}

HTML:

<img src="/hugeImage.jpg" class="hidden" />
<img src="/hugeImage2.jpg" class="hidden" />
<img src="/hugeImage3.jpg" class="hidden" />
<img src="/hugeImage4.jpg" class="hidden" />

您可以使用 JavaScript 轻松地对此进行模拟，在 DOMContentLoaded 事件之后将每个图像添加到 DOM - 应用相同的逻辑。

var img = document.createElement('img');
img.setAttribute('src', '/hugeImage.jpg');
img.setAttribute('class','hidden');
document.body.appendChild(img);