装载机后的Javascript图像

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循环中创建image元素

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";
    }
}