Question

可能重复：
Javascript hard refresh of current page

我有一个随机图片javascript，可以在页面加载时加载随机图像。我想在点击名为“随机图像”的链接时加载另一个随机图像。这是页面： http://www.heybrian.com/

现在的方式，“随机图像”链接只刷新整个页面，然后输入一个新的随机图像。

编辑：

下面是（截断的）javascript代码。请注意，大约有100张可以加载的随机照片，但我只包含了4张，以简化：

images = new Array(99);

images[0] = "<div id='content_white_border' style='border: 1px white solid;'><div id='content_photo'><a href = 'travels/thailand/2004/ko_tao.php'><img src='lib/images/travels/thailand/2004/ko_tao_mango_bay.jpg' alt='' width='956' height='512' border='0' /></a></div></div><h4>Mango Bay (Taa Toh Bay), Ko Tao &mdash; April 9, 2004</h4>";

images[1] = "<div id='content_white_border' style='border: 1px white solid;'><div id='content_photo'><a href = 'travels/france'><img src='lib/images/travels/france/eiffel_close.jpg' alt='' width='956' height='512' border='0' /></a></div></div><h4>La Tour Eiffel, Paris, France &mdash; November 26, 2006</h4>";

images[2] = "<div id='content_white_border' style='border: 1px white solid;'><div id='content_photo'><a href = 'travels/china/2007/hangzhou.php'><img src='lib/images/travels/china/2007/hangzhou_gold_buddha.jpg' alt='' width='956' height='512' border='0' /></a></div></div><h4>Buddha image,  Língyǐn Temple <span lang='zh' xml:lang='zh'>灵隐寺</span>, Hángzhōu, China &mdash; August 2, 2007</h4>";

images[3] = "<div id='content_white_border' style='border: 1px white solid;'><div id='content_photo'><a href = 'travels/sri_lanka'><img src='lib/images/travels/sri_lanka/elephant_baby_wide.jpg' alt='' width='956' height='512' border='0' /></a></div></div><h4>Baby at the elephant breeding center, Kandy, Sri Lanka</h4>";

images[4] = "<div id='content_white_border' style='border: 1px white solid;'><div id='content_photo'><a href='travels/mongolia/'><img src='lib/images/travels/mongolia/man_baby_3_wide.jpg' alt='' width='956' height='512' border='0' /></a></div></div><h4>Mongol and his baby, Mongolia &mdash; July 2006</h4>";

index = Math.floor(Math.random() * images.length);
document.write(images[index]);

Answer 1

如果你知道你可以选择的所有图像，你可以把它们放在一个数组中，当按钮完全加载到Javascript中时随机选择一个：

var imgs = ["a.jpg", "b.jpg", "c.jpg"];

function pickImage()
{
    var idx = parseInt(Math.floor(Math.random() * imgs.length), 10);
    document.getElementById("random_image").src = imgs[idx];
}

如果您不想将图像数组放在Javascript中，那么您需要使用AJAX来调用服务器。然后，服务器将确定应显示哪个图像，并将路径返回到浏览器。

Answer 2

您不应在“随机图像”链接上使用location.reload（）。而是使用JavaScript添加图像内容：

var link = document.getElementById('id_for_random_image_link');
link.addEventListener("click", function(evt){ 
   // code to insert your image
}, false);

此外，您不应该使用document.write();，只要您想要用新图像替换<div id="content_photo">内的图像，效率就会低下。因此，您应该删除JavaScript <div id='content_white_border'><div id="content_photo">数组中images的所有HTML标记，并将上一个函数转换为：

var link = document.getElementById('id_for_random_image_link');
link.addEventListener("click", function(evt){ 
   var index = Math.floor(Math.random() * images.length);
   document.getElementById('content_photo').innerHTML = images[index];
}, false);

Answer 3

使用onclick事件并随机更改SRC属性;

保持DRY：从JS中删除所有重复的泥泞HTML并将其放入文档正文中，只留下文件名和数组中的任何其他变量数据（例如href）。你可以使用一组对象：

var imgs = [
{name:"some_img.jpg",
 href:"dir\some.php"},
{name:"another_img.jpg",
 href:"direct\something.php"},
{name:"yet_antoher_img.jpg",
 href:"directory\some.php"}];

然后根据需要使用JQuery替换图像SRC和其他属性和内容。简化结构：

 $("button").onclick(function(){
   index = Math.floor(Math.random() * imgs.length);
   current = imgs[index];
   $("a").attr("href",current.href);
   $("img").attr("src",current.name);
    });

可以通过链接点击刷新JavaScript吗？

3 个答案: