使用脚本缓存图像

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.
});