javascript не может предварительно загрузить первое изображение

Question

Так что я хочу сделать галерею изображений, и 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;  

Спасибо за любую помощь!

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"; 
};