将图像不可见地预加载到 DOM 中，而不会延迟页面加载

Preload image invisibly into DOM without delaying page load

本文关键字：加载 延迟 图像 DOM      更新时间：2023-09-26

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

我想以可以显示图像的方式预加载图像。单击后无需任何加载时间。

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

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

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

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

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

使用此 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"; });
 }
相关文章：