1

我有一个网站，其中包含随机爆头的可爱自负。每次加载页面（或单击头像）时，它都会被新的头像替换。在我在 Facebook 上发布指向该网站的链接之前，它的效果很好。

然后发生的事情是当 Facebook 扫描页面以查找图像时，它没有找到随机图像，我认为是因为它不运行脚本。我希望 facebook 缩略图也有一个随机图像。

有没有办法在不求助于服务器端代码的情况下解决这个问题？

这是我现在要做的：

在头脚本部分

var lastTimeout = 0;
var lastHeadNum = 0;

function headURL(headCount)
{
    url = "/public/images/heads/mtoy";
    if( headCount < 10 )
        url += "0";
    url += headCount.toString();
    url += ".gif";
    return url;
}

function headshotImage()
{
    lastHeadNum = Math.floor((Math.random()*87)+1);
    document.write('<img id="headshot" src="' + headURL(lastHeadNum) + '" onclick="next_headshot();" width=150 height=150>\n');
    lastTimeout = setTimeout("next_headshot();", 12000);
}

function next_headshot()
{
    if (lastTimeout != 0)
        clearTimeout(lastTimeout);
    do {
        headNum = Math.floor((Math.random()*87)+1);
    } while (headNum == lastHeadNum);
    lastHeadNum = headNum;
    document.getElementById('headshot').src = headURL(headNum);;
    lastTimeout = setTimeout("next_headshot();", 12000);
}

然后在body-html中

<div id="contents">
<script type="text/javascript">headshotImage();</script>
<H1 class="contenthead">Table of Contents</H1>

在以前的化身中，body-html 看起来像：

<div id="contents">
<img id="headshot" src="" onclick="next_headshot();">
<H1 class="contenthead">Table of Contents</H1>

然后我有一个 body.onload 处理程序来第一次调用 next_headshot，这与 Facebook 有同样的问题。

4

1 回答 1

1

如果您真的希望 Facebook 拥有随机图像，那么我认为您需要服务器端代码。但是，如果您对固定图像感到满意，请查看 OpenGraph。您应该可以将其放在您的<head>部分中：

<meta property="og:image" content="/public/images/heads/mtoy01.gif"/>

另一种方法是将<img>标记直接放入 HTML 中（而不是通过程序生成）并将其硬编码到一个图像中。它不会为您提供最初的随机图像，尽管您可能会在页面加载时立即将其换掉。

于 2012-05-16T16:43:07.457 回答