Question

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

以下是代码：

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;

感谢您的帮助！

Answer 1

由于图像加载需要一些时间，如果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";
};

javascript无法预加载第一张图片

1 个答案: