Question

我有一个带有一堆图像的div

<div id="glueslide">
    <img src="tree.jpg" />
    <img src="cat.jpg" />
    <img src="dog.png" />
    <img src="horse.jpg" />
</div>

在我的jQuery代码中，我将此代码用作

$(function () {
    var $img = $("#glueslide img");
    ...
    $img.filter(..);
    ..
    $img.eq(index).fadeOut(1000,function(){
    });

依旧......

如您所见，没有缓存。现在我想介绍缓存，缓存所有图像或在使用之前预先加载它们。

我的代码如何变更？我会写什么而不是var $img = $("#glueslide img");，以便我的其余代码不会发生很大变化

Answer 1

这是一个比它看起来更复杂的问题。自己编写它会显着改变你的代码。如果你正在寻找一种简单的方法来保留你写的大部分内容，我推荐

`waitForImages`

@alexdickson插件。然后你就可以这样编写你的代码：

$(function () {
    $('#gludeslide').waitForImages(function(){

       var $img = $("#glueslide img");
       ...
       $img.filter(..);
       ..
       $img.eq(index).fadeOut(1000,function(){
       });

如果浏览器从jQuery缓存，你无法控制它，它基于标题（来自服务器的HTTP组件）。

Cache Headers

通常，浏览器会自动缓存图像，您只需要等待第一次加载。

Answer 2

简短版本是您编写不需要的代码的方式。

从它的外观来看，你正在创建一个jquery图像旋转器。我假设您的图像在HTML中，并且您正在使用CSS来隐藏它们。在javascript参与之前，图像被下载，因此在页面加载时预加载和缓存。

您可以使用Firebug for Firefox（Net Tab）或Developer Tools For Chrome（网络标签）等工具来确认这一点。这将显示之前作为文档加载的一部分加载的图像。

如何在DIV中缓存图像

2 个答案:

`waitForImages`

Cache Headers