Question

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

我想以一种可以在on.click上显示的方式预加载图像，而无需在点击后加载任何时间。

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

Answer 1

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

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

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

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

 }

在不延迟页面加载的情况下将图像无形地预加载到DOM中

2 个答案: