Question

所以我正在编写一个javascript来替换一个默认图片，该图片填满了我网页上众多图片的空间。这样，页面加载速度更快。（脚本使用body onload进行激活）所有默认图像都具有相同的类，其id等于其文件名。

function imgPostLoad(totalpics, placeholder) {
    var img = document.createElement('img');
    for (var i = 0; i < totalpics; i++) {
        var picture = document.getElementsByClassName(placeholder)[i];
        img.onload = function (evt) {
            picture.src = this.src;
            picture.width = this.width;
            picture.height = this.height;
        }
        img.src = "/img/" + picture.getAttribute("id") + ".jpg";
    }
}

它可以工作，但仅适用于数组中最后一个图像。其余图像保持不变。怎么了？

Answer 1

你可以简单地做：

function imgPostLoad(totalpics, placeholder) {
    for (var i = 0; i < totalpics; i++) {
        var picture = document.getElementsByClassName(placeholder)[i];
        picture.src = "/img/" + picture.getAttribute("id") + ".jpg";
    }
}

代码中的问题是，img加载时picture是另一个变量。

Answer 2

function imgPostLoad(placeholder) {
    var allPictures = document.getElementsByClassName(placeholder);
    for (var i = 0; i < allPictures.length; i++) {
        var picture = allPictures[i];
        picture.src = "/img/" + picture.getAttribute("id") + ".jpg";
    }
}

Answer 3

实际上，这样写它会更清晰。

function imgPostLoad() {

     var placeHolders = document.body.querySelectorAll('.placeholder');

    for (var i = 0; i < placeHolders.length; i++) {

        placeHolders[i].src = "/img/" + placeHolders[i].getAttribute("id") + ".jpg";
    }
}

Answer 4

在for循环中创建像这样的

的图像元素

function imgPostLoad(totalpics, placeholder){
    for (var i = 0; i < totalpics; i++){
        var img = document.createElement('img');
        var picture = document.getElementsByClassName(placeholder)[i];
        img.onload = function (evt) {
            picture.src=this.src;
            picture.width=this.width;
            picture.height=this.height;
        }
        img.src = "/img/" + picture.getAttribute("id") + ".jpg";
    }
}

装载机后的Javascript图像

4 个答案: