0

可能重复：
当前页面的 Javascript 硬刷新

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

现在的方式是，“随机图像”链接只是刷新了整个页面，从而拉入了一个新的随机图像。

编辑：

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

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'>灵隐寺&lt;/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]);
4

3 回答 3

0

您不应该在“随机图像”链接上使用 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">用新图像替换其中的图像时，您不应该使用它效率低下。因此，您应该删除<div id='content_white_border'><div id="content_photo">JavaScriptimages数组中的所有 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);
于 2013-01-04T07:50:59.177 回答
0

使用一个 onclick事件，随机改变SRC属性；

保持干燥：从您的 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);
    });
于 2013-01-04T07:56:42.127 回答
0

如果您知道所有可供选择的图像，您可以将它们放在一个数组中，并在按钮完全用 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 来调用服务器。然后，服务器将确定应该显示哪个图像，并将路径返回给浏览器。

于 2013-01-04T07:04:58.483 回答