0

所以我想制作一个图片库，其中 99% 的效果都很棒。但是有一个问题。首先称为图像从不水平居中，其他人这样做。看起来预加载有一些问题。我这里的原则是我首先预加载图像，然后创建元素 IMG，将图像设置为 500 像素的高度，获取宽度的值，然后将其水平居中。

这是代码：

var slike = ["image1", "image2", "image3"];
var slike2 = ["image12", "image22", "image22"];

var sprem = function(ime, zacetek) {


        for (var f = 0; f < ime.length; f++ ) {
            var nalagati = new Image();
            nalagati.src = ime[f];
        }

        var wrap = document.getElementById("wrapper");
        wrap.style.display="block";
        var prik = document.getElementById("prikaz");
        prik.style.display="block";
        var pus = document.getElementById("pus");
        pus.style.display="block";
        var pus2 = document.getElementById("pus2");
        pus2.style.display="block";

        var img = document.createElement("IMG");
        img.setAttribute("id", "slik");            
        img.src=ime[zacetek];           
        img.style.position="relative";
        img.style.height="500px";
        img.style.top="15%";

        var sirina = img.width;
        var izracun = sirina / 2;


        img.style.marginLeft="-" + izracun + "px";            
        img.style.left="50%";

        img.style.border="5px solid white";                    



        document.getElementById("prikaz").appendChild(img);
        document.getElementById("izhod").style.display="inline";
        var x = document.getElementById("okvir");          


        window.ime = ime;
        window.zacetek = zacetek;

谢谢你的帮助！

4

1 回答 1

0

由于图像加载需要一些时间，如果没有完全加载，该语句var sirina = img.width将给出错误值。img

最好的方法是在图像完全加载后进行所有样式设置。像这样： 

img.onload = function(){
    var img = document.getElementById('slik');
    img.style.position="relative";
    img.style.height="500px";
    img.style.top="15%";

    var sirina = img.width;
    var izracun = sirina / 2;
    img.style.marginLeft="-" + izracun + "px";            

    img.style.left="50%";
    img.style.border="5px solid white";
};
于 2013-08-22T12:50:52.540 回答