在不延迟页面加载的情况下将图像不可见地预加载到 DOM [重复]

Posted 2023-05-07

【中文标题】在不延迟页面加载的情况下将图像不可见地预加载到 DOM [重复]

【英文标题】：Preload image invisibly into DOM without delaying page load [duplicate]

【发布时间】：2016-06-21 14:08:55

【问题描述】：

这可能是一个没有答案的问题。

我想以一种可以在单击时显示的方式预加载图像，而单击后没有任何加载时间。

但是我也不想增加加载页面的加载时间。所以基本上我正在寻找一种在后台加载图像的方法在 onload 事件和之前 用户请求查看图像（on.click）。

【问题讨论】：

这个 dup How do you cache an image in javascript 提供了一个选项，该选项在页面中的其他资源完成加载之前不会开始预加载（以免以任何方式减慢它们的速度）。

【参考方案1】：

页面完全加载后（触发window.onload事件），您可以使用该代码预加载任何图像。

var image = new Image();
image.src = 'http://hostname/path/to/image.png'

此代码放置加载图像并将其放置到浏览器缓存中。

【参考方案2】：

看看这个，它会在页面加载后异步抓取图片，只在图片完全下载后显示图片元素：

使用此 html：

 <img id="theImg">

还有这个 CSS：

 #theImg display:none; 

使用此 JavaScript 以异步加载图像：

 window.addEventListener("load", function()
        setTimeout(loadImg, 0);
 );

 function loadImg()
     var i = document.getElementById("theImg");
     i.src = "your path to src";
     i.addEventListener("load", function() i.style.display= "inline"; );