0 
function ft1(){
        var imgSrcs = ['1.gif','2.gif','3.gif','4.gif','5.gif','6.gif','7.gif','8.gif']; 
        var myImages = [], img;
        for (var i = 1; i <=8; i++) {
            img = new Image();
            img.onload = function() {

                var div0 = document.getElementById(i);
                div0.style.backgroundImage = "url(" + this.src + ")";
            };
            img.src = imgSrcs[i];
            myImages[i] = img;
        }

        }


<input name="Button1" type="button" value="button" onclick="ft1();" />

我的 div id 是 1 到 8。我想使用 javascript 为该潜水添加图像。但是此代码无法正常工作。如果你知道错误在哪里，请给我打电话。

4

6 回答 6

0

尝试在循环中使用此代码

var elem = document.createElement("img");
elem.src = this.src;
elem.setAttribute("height", "250");
elem.setAttribute("width", "1024");
elem.setAttribute("alt", "alt text");
document.getElementById("placehere").appendChild(elem);

祝你好运！

于 2013-09-25T04:41:12.297 回答
0

我对您的代码进行了一些更改：

function ft1() {
    var imgSrcs = ['1.gif', '2.gif', '3.gif', '4.gif', '5.gif', '6.gif', '7.gif', '8.gif'];
    var myImages = [];
    for (var i = 1; i <= imgSrcs.length; i++) {
        var img = new Image();
        img.src = imgSrcs[i];
        var div0 = document.getElementById(i);
        //I am not sure what you are trying to do in the below line.
        //div0.style.backgroundImage = "url(" + this.src + ")";
        div0.appendChild(img);
        myImages[i] = img;
    }
}

AFAIK，img.onload将不起作用，因为img变量不是 DOM 的一部分。appendChild首先，您需要使用如上所示的方法使其成为 DOM 的一部分。

我有一个问题，this.src指的是什么？

于 2013-09-25T04:42:06.263 回答
0

我认为你应该使用imgSrcs[i]而不是this.src

于 2013-09-25T04:43:18.963 回答
0 
<script type="text/javascript">
        var myImages = new Array("usa.gif","canada.gif","jamaica.gif","mexico.gif");// list of images

        function changeImg(that) // function call on_click of image below
    {
        var newImgNumber = Math.round(Math.random()*3); // create math to random the images

        while (that.src.indexOf(myImages[newImgNumber]) != -1) // make sure that the randomization corresponds to the list of images
        {
            newImgNumber = Math.round(Math.random()*3) // sets the math to the new image
        }

        that.src = myImages[newImgNumber]; // change the image 

        return false; // makes it able to be done again
    }
</script>

于 2013-09-25T04:49:10.883 回答
0

如果您尝试将图像添加到所有 div，我会尝试将其简化为：

function ft1(){
    var imgSrcs = ['1.gif','2.gif','3.gif','4.gif','5.gif','6.gif','7.gif','8.gif']; 
    for (i = 1; i <=8; i++) {
            var div = document.getElementById(i);
            div.style.backgroundImage = "url(" + imgSrcs[i] + ")";//make sure images are in the right folder
    }

}

<input name="Button1" type="button" value="button" onclick="ft1()" /> //remove semicolon

这是一个带有颜色而不是图像的 jsfiddle 的链接http://jsfiddle.net/CKFrantz/gLfXA/

于 2013-09-25T05:12:22.760 回答
0

循环的问题可能是循环计数器在所有回调中都是相同的。（请注意，闭包只是共享相同的范围，因此在退出循环后，所有闭包的值都是 8。）

这可以通过工厂函数来克服（传递一个简单的值作为参数将导致它被复制）：

function loadImageToElement(id, imgscr) {
    var img = new Image();
    img.onload = function() {
        var el = document.getElementById(id);
        el.style.backgroundImage = "url(" + this.src + ")";
        // we could use just the same:
        // el.style.backgroundImage = "url(" + imgscr + ")";
    };
    img.src = imgscr;
    return img;
}

function ft1(){
    var imgSrcs = ['1.gif','2.gif','3.gif','4.gif','5.gif','6.gif','7.gif','8.gif']; 
    var myImages = [];
    for (var i = 0; i < 8; i++) {
        myImages[i] = loadImageToElement('div' + (i+1), imgSrcs[i]);
    }
}

<input name="Button1" type="button" value="button" onclick="ft1();" />

编辑：您可能需要检查img.complete：

function loadImageToElement(id, imgscr) {
    var img = new Image();
    var f = function() {
        var el = document.getElementById(id);
        el.style.backgroundImage = "url(" + imgsrc + ")";
    }
    img.src = imgscr;
    if (img.complete) {
        f();
    }
    else {
        img.onload = f;
    }
    return img;
}

（注意：Image.complete是true，如果图像已经被缓存。在这种情况下，onload-event 不会在某些浏览器中触发。）

于 2013-09-25T05:14:50.983 回答