0

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

  • 预加载多张图片（比如 50 张？）
  • 从这 40 个中随机选择，每次将其中的 14 个分配给 14 个 div
  • 永远骑自行车

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

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

EDIT2：将问题改写为更精确和清晰

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

  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

2 回答 2

1

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

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

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

于 2012-10-11T06:35:37.743 回答
1

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

  $("#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 秒后，显示内容。

于 2012-10-11T06:36:01.843 回答