0

我试图用 Javascript 自己制作一个照片库，这是我的代码：

var images =    [   
                "BAN46",
                "BASTIONE"
                ];

var legendes =  [   
                "exemple \"avec des\" guillemets",
                "legende2"
                ];


var path = '/galerie/';
var nbr = images.length;
var galerie = document.getElementById('sous_galerie');
var bloc_image = document.getElementById('bloc_image');
var nouvelle_image;

for(var i = 0; i < nbr; i++) {
    nouvelle_image = document.createElement('img');
    nouvelle_image.src = path + 'vignettes/' + images[i] + '-vignette.jpg';
    nouvelle_image.alt = images[i];
    nouvelle_image.setAttribute('onclick', 'zoom(' + i + ')');
    galerie.appendChild(nouvelle_image);
}

function zoom(i) {
    var image = document.createElement('img');  
    image.src = path + images[i] + '.jpg';
    image.alt = images[i];
    image.id = images[i];
    image.setAttribute('onclick', 'dispose(' + i + ')');

    var paragraphe = document.createElement('p');
    paragraphe.innerHTML = legendes[i];
    paragraphe.id = legendes[i];

    var ratio = image.height / image.width; 
    if(image.height >= 750) {
        image.height = '750';
        image.width = image.height / ratio;
    }

    image.style.marginTop = 0 - image.height / 2 + 'px';
    image.style.marginLeft = 0 - image.width / 2 + 'px';

    paragraphe.style.width = image.width + 'px';
    paragraphe.style.marginTop = (image.height + 20) / 2 + 'px';
    paragraphe.style.marginLeft = 0 - image.width / 2 + 'px';

    bloc_image.style.width = '100%';
    bloc_image.style.height = '100%';

    bloc_image.appendChild(image);
    bloc_image.appendChild(paragraphe);
}

function dispose(i) {
    bloc_image.removeChild(document.getElementById(images[i]));
    bloc_image.removeChild(document.getElementById(legendes[i]));
    bloc_image.style.width = '0';
    bloc_image.style.height = '0';
}

（对不起，代码是法语。如果您需要对代码进行评论或精确，请随时问我=））

我的问题是，当我单击小插图时，它显示正确的图像，但认为它的宽度和高度为 0px，因此图像正确显示但向东南移动，因为

image.style.marginTop = 0 - image.height / 2 + 'px';
image.style.marginLeft = 0 - image.width / 2 + 'px';

此外，标题也移动到图片上。但是，当我更新页面并重试时，这次图片正确显示并位于中间，因为它的宽度和高度值是正确的。

似乎浏览器在加载其属性之前显示图像和标题，我不知道如何纠正这个“错误”。

4

1 回答 1

1

您必须等待图像完成加载才能访问尺寸：

function zoom(i) {
    var image = document.createElement('img');  
    image.src = path + images[i] + '.jpg';
    image.alt = images[i];
    image.id = images[i];
    image.setAttribute('onclick', 'dispose(' + i + ')');
    image.onload = function() {
        var paragraphe = document.createElement('p');
        paragraphe.innerHTML = legendes[i];
        paragraphe.id = legendes[i];

        var ratio = image.height / image.width; 
        if(image.height >= 750) {
            image.height = '750';
            image.width = image.height / ratio;
        }

        image.style.marginTop = 0 - image.height / 2 + 'px';
        image.style.marginLeft = 0 - image.width / 2 + 'px';

        paragraphe.style.width = image.width + 'px';
        paragraphe.style.marginTop = (image.height + 20) / 2 + 'px';
        paragraphe.style.marginLeft = 0 - image.width / 2 + 'px';

        bloc_image.style.width = '100%';
        bloc_image.style.height = '100%';

        bloc_image.appendChild(image);
        bloc_image.appendChild(paragraphe);
    }
}

此外，最好使用实际的事件处理程序，而不是创建属性。例如，替换这个：

image.setAttribute('onclick', 'dispose(' + i + ')');

和：

image.onclick = function() {
    dispose(i);
};

（或者使用addEventListener, 适当的回退，attachEvent以便它在 oldIE 上工作）。

当您在for循环中时，它将需要更复杂的语法（为什么？）。所以替换：

nouvelle_image.setAttribute('onclick', 'zoom(' + i + ')');

和：

nouvelle_image.onclick = (function(index){
    return function() {
        zoom(index)
    }
}(i));
于 2013-05-24T19:04:33.243 回答