使用脚本缓存图像

Question

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

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

图片没有缓存在服务器上的时候，就不能正常工作了，我想知道有没有办法强制timthumb缓存一张图片，然后取回，或者有没有办法用JavaScript来确保图像首先被缓存。

Answer 1

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

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

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

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

---

您还可以将一些图像加载到您的 HTML 中，然后简单地使用一些 css 技巧来隐藏它们 -

• display:none

  或

• visibility:hidden

然后仅在它们完全加载时显示它们。您可以为此使用.load() 函数。只需将其附加到 <img> 标签 -

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