自制javascript画廊bug

Home made javascript gallery bug

本文关键字：bug 画廊 javascript 自制      更新时间：2023-09-26

我试着用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';

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

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

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

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));
相关文章：