Question

我试图在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';

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

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

Answer 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循环时，它需要更复杂的语法（why?）。所以替换：

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

使用：

nouvelle_image.onclick = (function(index){
    return function() {
        zoom(index)
    }
}(i));

自制的javascript库错误

1 个答案: