javascript無法預先載入第一張圖片

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

由於圖像加載需要一些時間，如果img尚未完全加載，則語句var sirina = img.width將給出錯誤的值。

最好的方法是在圖像完全加載後完成所有樣式。像這樣：

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