JQuery图像预加载 - 动态图像集

Question

我有一个滑块可以保持动画背景图像。背景图像被应用到页面的主体元素，即它占据了页面的整个大小。

在主页上可以看到此动画...滑块中共有10个图像从数据库中提取。

我的问题是我应该如何预加载这些图像，因为大多数图像的大小超过200-300KB.jquery预加载需要一个静态的图像名称数组，但在加载时我不知道它们的名字。

那么你们可以帮我预加载这些动态图像吗？

Answer 1

这是一个简单的脚本，有助于使用javascript预先加载图像。

    $.each(data, function(index, item) {
        var tempImage = new Image();
        tempImage.src = item.url;
        preloadedImages.push(tempImage);
    }


where data as an array of image data 
data=
{
   name:'NameofImage',
   url:'http://www.website.com/image1.jpg',
}

要显示图像，只需将图像添加到DOM

即可

 $("img").attr({
                src: item.src
            }).appendTo("#target");

我有一个简单的jsfiddle来演示脚本。它从ajax请求中获取数据并预加载图像。当用户将鼠标悬停在目标上时，它会将图像附加到DOM。

下面是屏幕截图，显示在页面加载时正在加载图像：

这个reference link认为隐藏在div中的图像可能不会像Opera那样在某些浏览器中预先加载。我以为还没有验证过它。

如果您不想使用javascript，可能还有其他方法可以使用css加载图片

希望这有帮助