2012-10-11 133 views
0

我有这样的jQuery的图像循环仪,做以下操作:循环通过一组无数循环中的jQuery的图像?

  • 预载多张图像(如50?)
  • 从这些40每次
  • 骑车他们选择随机分配其中的14至14个div的永远的

什么是最好的方式来循环14个图像,得到一个随机图像分配给每个14格?

编辑: 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 }); 
    }) 
+0

你是什么意思,“永远骑自行车”?不知何故与每4秒加载一次新图像相矛盾。 – dokaspar

+0

总共有14个图像,还是'/ get_img'从大池中返回一个新的随机图像? – CWSpear

+0

@CWSpear是的,有14个图像通过get_image函数从较大的池中返回 – Rubytastic

回答

1

你可以在AJAX中返回源代码并创建<img>并设置src,然后如果不需要,请隐藏它,以便返回该图片再次,您可以取消隐藏它,而不是再次加载它。您可以检查图像是否存在类似的东西:

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

如果这是真的,那么它存在,所以只显示它。如果不是,则将该图像加载到DOM中。不需要时只需隐藏图像。

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准备就绪,它会加载图像,并立即隐藏它。然后在延迟4秒后显示内容。