Question

我一直使用以下代码生成随机图像，但没有图片显示。

<html>

<head>
<SCRIPT LANGUAGE="JavaScript">

var theImages = new Array() 

theImages[0] = '<img class="atvi-image-image" alt=""src="/content/dam/atvi/callofduty/blackops2/cod-bo2/dlc/mdlc-calling-card-flags.png" title="" height="467" width="675">'
theImages[1] = '<img class="atvi-image-image" alt="" src="/content/dam/atvi/callofduty/blackops2/cod-bo2/dlc/mdlc-nuketown-zombies.png" title="" height="732" width="1084">'
theImages[2] = '<img class="atvi-image-image" alt="" src="/content/dam/atvi/callofduty/blackops2/cod-bo2/dlc/mdlc-extra-slots.png" title="" height="480" width="752">'
theImages[3] = '<img class="atvi-image-image" alt="" src="/content/dam/atvi/callofduty/blackops2/cod-bo2/dlc/mdlc-nuketown-2025.png" title="" height="412" width="683">'



var j = 0
var p = theImages.length;
var preBuffer = new Array()
for (i = 0; i < p; i++){
preBuffer[i] = new Image()
preBuffer[i].src = theImages[i]
}
var whichImage = Math.round(Math.random()*(p-1));
function showImage(){
document.write(theImages[whichImage]);
}
</script>
</head>
<body>
<SCRIPT LANGUAGE="JavaScript">
showImage();
</script>
</body>
</html>

提前感谢您的帮助！

Answer 1

您已在阵列中拥有完整 <img>标记。所以只需使用：

document.write(theImages[whichImage]);

虽然我建议不要使用document.write。当然，在你的情况下，它在HTML中间执行，我看不出太多问题。如果在呈现页面后执行document.write会很糟糕。通常情况下，首选方法类似于appendChild方法，甚至设置innerHTML，但需要进行一些重构才能让代码使用它们。

以下是我如何设置的示例：

(function () {
    var theImages = [{
        src: "http://www.techinasia.com/techinasia/wp-content/uploads/2009/12/smile.png",
        width: "675",
        height: "467"
    }, {
        src: "https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQdcHlJqgIKNOS0DaEjO31xK1zYtmJlza8z70ljiKFbo2ZgLdh9eA",
        width: "1084",
        height: "732"
    }, {
        src: "http://cdn2-b.examiner.com/sites/default/files/styles/large_lightbox/hash/68/d1/68d11ab242d40c8d5abbe8edb58fd4ed_0.jpg?itok=M3qtK47_",
        width: "200",
        height: "200"
    }];

    var preBuffer = [];
    for (var i = 0, j = theImages.length; i < j; i++) {
        preBuffer[i] = new Image();
        preBuffer[i].src = theImages[i].src;
        preBuffer[i].width = theImages[i].width;
        preBuffer[i].height = theImages[i].height;
    }

    function getRandomInt(min, max) {
        return Math.floor(Math.random() * (max - min + 1)) + min;
    }

    window.getRandomImage = function () {
        var whichImage = getRandomInt(0, preBuffer.length - 1);
        return preBuffer[whichImage];
    }
})();

window.onload = function () {
    var newImage = getRandomImage();
    console.log(newImage);
    document.body.appendChild(newImage);
};

DEMO： http://jsfiddle.net/wFjGv/

此代码使用新对象来保存每个图像的详细信息。这样，您可以轻松设置和获取所需的每个图像属性，而无需对HTML进行硬编码。

它预加载preBuffer数组中的图像，并在需要时从数组中检索图像，并将其放入<body>。您可以在onload事件中更改其目标。 getRandomImage函数返回该数组中的随机图像。我也更新了获取随机整数的方法。

Answer 2

您正在设置<img src=某些不是您想要的东西。您的数组（theImages）正在存储完整的<img>代码，而不仅仅是指向该代码的链接。

将theImages数组更改为存储值，如下所示：

theImages[0] = "/content/dam/atvi/callofduty/blackops2/cod-bo2/dlc/mdlc-calling-card-flags.png"

或使用当前设置作为图像标记。

document.write(theImages[whichImage]);

此外：

使用随机数字，您可能应该坚持Math.floor() 你绕过你的最大长度。
var j = 0缺少;
theImages img标记未关闭（<img ... />

Answer 3

试试这个 -

var srcs = [
    "/content/dam/atvi/callofduty/blackops2/cod-bo2/dlc/mdlc-calling-card-flags.png",
    "/content/dam/atvi/callofduty/blackops2/cod-bo2/dlc/mdlc-nuketown-zombies.png",
    "foo/bar.jpg"
    ], imgs = [];
function init() {
    "use strict";
    var i, x, div;
    div = document.createElement('div');
    div.id = 'imageContainer';
    document.querySelector('body').appendChild(div);
    for (i = 0; i < srcs.length; i += 1) {
        x = new Image();
        x.src = srcs[i];
        imgs.push(x);
    }
}
function showRandom() {
    "use strict";
    document.querySelector('#imageContainer').innerHTML = imgs[Math.random * imgs.length];
}
init();

添加随机图像 -

showRandom();

PS - 您不应该使用document.write，但如果这样做，则应按document.close关闭流，告诉浏览器完成加载页面。 Read more - MDN JS Docs

如何在javascript中生成随机图像？

3 个答案: