使用脚本缓存图像

Question

我正在使用TimThumb这是一个用于调整图像大小的PHP脚本。

它缓存图像，我的Web应用程序依赖于缓存来正常运行。

当图像没有缓存在服务器上时，它无法正常工作，我想知道是否有办法强制timthumb缓存图像，然后检索它，或者是否有办法使用JavaScript来确保首先缓存图像。

Answer 1

为确保浏览器将图像预加载到缓存中，您可以使用一些本机JavaScript对象。

var imgPreload = new Image();
imgPreload.src = PATH_TO_IMAGE;

现在，当您为<img>标记提供与src相同的PATH_TO_IMAGE属性时，它已经被浏览器预先加载。

<img src="PATH_TO_IMAGE" width="100%" >

---

您还可以将一些图像加载到HTML中，只需使用一些css技巧来隐藏它们 -

• display:none

  或

• visibility:hidden

然后只在满载时显示它们。你可以使用.load()函数。只需将其附加到<img>代码 -

即可

$("#imageSelector").load(function(){
  // image was fully loaded.
});