在无限循环中使用jquery循环浏览一组多个图像？答案

【问题标题】：Cycle through a set of multiple images with jquery in an endless loop?在无限循环中使用jquery循环浏览一组多个图像？
【发布时间】：2012-10-11 06:25:14
【问题描述】：

我有一个执行以下操作的 jquery 图像循环器：

预加载多张图片（比如 50 张？）
从这 40 个中随机选择，每次将其中的 14 个分配给 14 个 div
永远循环使用它们

循环浏览 14 个图像并为 14 个 div 中的每一个分配一个随机图像的最佳方法是什么？

编辑：像我的第一个解决方案一样的 AJAX 调用似乎是一个愚蠢的想法（如果打开了数百个页面，服务器负载会很高）所以预缓存似乎是一个更好的选择。

编辑2：将问题重写为更准确和清晰

我在预缓存中发现了这个很棒的方法：

  var images = [
    '/path/to/image1.png',
    '/path/to/image2.png'
];

$(images).each(function() {
    var image = $('<img />').attr('src', this);
});

我现在的旧方法：

  $("#hi1").load('/get_img');
  $("#hi2").load('/get_img');
  $("#hi3").load('/get_img');
  ... etc till 14

  var refreshId = setInterval(function() {
      $("#h1").load('/get_img');
      $("#h2").load('/get_img');
      $("#h3").load('/get_img');
      }, 4000);
      $.ajaxSetup({ cache: true });
  })

【问题讨论】：

“永远循环”是什么意思？这在某种程度上与每 4 秒加载一次新图像相矛盾。
总共有 14 张图像，还是 /get_img 从一个大池中返回一个新的随机图像？
@CWSpear 是的，get_image 函数从较大的池中返回了 14 张图像
@Dominik 我有点不清楚：我提到加载多个图像，然后每 4 秒循环一次，其中每个图像都将被一个新图像替换（之前未显示）
您不需要 Ajax。只需每 4 秒重置一次图像的 src 属性。

标签： jquery image caching cycle

【解决方案1】：

您可以在 AJAX 中返回源代码并创建一个 <img> 并设置 src，然后如果不需要，将其隐藏，因此如果该图像再次返回，您可以取消隐藏它而不是加载它再次。您可以通过以下方式检查图像是否存在：

$('img[src="' + src + '"]').length > 0;

如果这是真的，那么它就存在，所以就展示它吧。如果没有，则将图像加载到 DOM 中。只需在不需要时隐藏图像即可。

【讨论】：

【解决方案2】：

你可以在你的代码中做一件事。

  $("#hi1").load('/get_img');
  $("#hi2").load('/get_img');
  $("#hi3").load('/get_img');

  var refreshId = setInterval(function() {
      $("#h1").load('/get_img').hide().delay(4000).show();
      $("#h2").load('/get_img').hide().delay(4000).show();
      $("#h3").load('/get_img').hide().delay(4000).show();
      }, 0);
      $.ajaxSetup({ cache: true });
  })

所以一旦 dom 准备就绪，它会加载图像并立即隐藏它。然后在delay(4000) 延迟 4 秒后，它会显示内容。

【讨论】：