Question

是否可以预加载具有特定类的图像？

例如

- 仅预加载类'.grid'

的图像

我已经看到很多基于数组的预加载示例，但是我的图像名称是动态生成的（我正在使用Drupal 6），除非必须，否则我不想全局预加载图像。

有什么想法吗？谢谢斯蒂芬妮

Answer 1

var imgs = new Array();
$('img.grid').each(function(idx){
 var i = new Image();
 i.src = $(this).attr('src');
 imgs.push(i);
});

Answer 2

如果您要解决的问题是在页面中加载grid类更快的图像，则无法执行此操作。要查找页面中具有grid类的图像，您必须等待DOM加载，然后搜索DOM以查找这些图像。在您这样做时，浏览器已经在加载它们。在那时你无法用Javascript做任何事情可以使图像加载更快。浏览器已经加载了它们。

我唯一知道你可以做的是创建一个你要加载的URL数组，你可以在javascript的第一部分（head标签中的脚本）中预加载这些URL。这“可能”使图像加载速度更快。但是，为了做到这一点，你必须手动列出你想要应用它的图像。您不能等待页面加载并在页面中查找它们，因为到那时，它们已经尽可能快地加载。如果您控制服务器端代码，您可以在服务器端生成此图像列表并将该数组放入JS中。如果你这样做，它看起来像这样：

<head>
<script type="text/javascript">
var preloadURLs = [
    "http://photos.smugmug.com/photos/344291068_HdnTo-Ti.jpg",
    "http://photos.smugmug.com/photos/344290837_ypsKL-Ti.jpg"
];

var preloadImgs = [], img;
for (var i = 0; i < preloadURLs.length; i++) {
    img = new Image();
    img.src = preloadURLs[i];
    preloadImgs.push(img);
}

</script>
</head>

在大多数浏览器中，这应该在某种程度上优先考虑加载这些图像，因为它们的请求将在页面开始加载之前首先启动。

使用jquery预加载具有特定类的图像

2 个答案: