圖像載入觸發器立即

Question

我創建了一個lightbox，它可以從圖庫中加載圖像，當單擊圖像時（一次一個）。問題是圖像不加載，因此圖像的尺寸未知。這裏是代碼：

function showimage(image_path) { 
    imgobj = new Image(); 
    imgobj.src = image_path; 
    var aspectratio = imgobj.width/imgobj.height; 
    var newht = imgobj.height; 
    var newwd = imgobj.width; 
    if (($(window).height() - 100) < newht) { 
     newht = $(window).height() - 100; 
     newwd = newht*aspectratio; 
    } 
    if (($(window).width() - 100) < newwd) { 
     newwd = $(window).width() - 100; 
     newht = newwd/aspectratio; 
    } 
    $('#lightbox img').attr('height', newht); 
    $('#lightbox img').attr('width', newwd); 
    $('#lightbox').show(); 
} 

我使用的onLoad試過，但立即觸發和圖像仍沒有加載和犯規給予適當的圖像尺寸。 Here我讀到，當圖像已經加載到瀏覽器中時，onLoad被立即調用。

其他人都建議使用時間延遲「setTimeout」，但這似乎不是一個好的解決方案，因爲圖像可能具有不同的大小，並且可能需要不同的時間加載。

有什麼建議如何解決這個問題。

編輯1：

感謝下面的答案，我能夠得到使用負荷工作（）的功能。但是現在如果圖像已經加載並且已經顯示在燈箱中，那麼再次點擊。 load（）中的函數不會被調用，並且不會出現燈箱。有什麼建議麼？

編輯2：

解決方法：這是我工作：

function showimage(image_path) { 
    imgobj = new Image(); 
    imgobj.src = image_path; 
    if (imgobj.complete == false) 
     $(imgobj).load(function(){processimage(imgobj);}); 
    else 
     processimage(imgobj); 
} 

function processimage(imgobj) { 
    var aspectratio = imgobj.width/imgobj.height; 
    var newht = imgobj.height; 
    var newwd = imgobj.width; 
    if (($(window).height() - 100) < newht) { 
     newht = $(window).height() - 100; 
     newwd = newht*aspectratio; 
    } 
    if (($(window).width() - 100) < newwd) { 
     newwd = $(window).width() - 100; 
     newht = newwd/aspectratio; 
    } 
    $('#lightbox img').attr('height', newht); 
    $('#lightbox img').attr('width', newwd); 
    $('#lightbox').show(); 
} 

Answer 1

這爲我工作。我正在重新使用圖像對象。

$(document).ready(function() { 
    var imgobj = new Image(); 
    function showimage(image_path) { 
     imgobj.src = image_path; 
     if (imgobj.complete == false) 
      $(imgobj).load(function(){processimage(imgobj);}); 
     else 
      processimage(imgobj); 
    } 

    function processimage(imgobj) { 
     var aspectratio = imgobj.width/imgobj.height; 
     var newht = imgobj.height; 
     var newwd = imgobj.width; 
     if (($(window).height() - 100) < newht) { 
      newht = $(window).height() - 100; 
      newwd = newht*aspectratio; 
     } 
     if (($(window).width() - 100) < newwd) { 
      newwd = $(window).width() - 100; 
      newht = newwd/aspectratio; 
     } 
     $('#lightbox img').attr('height', newht); 
     $('#lightbox img').attr('width', newwd); 
     $('#lightbox').show(); 
    } 
}); 

Answer 2

如果妳總是想訪問圖像的高度和寬度，你可以採取不同的方法，並使用jQuery的hide()和show()功能。

這種方式圖像將始終加載，你只會在圖像被點擊時顯示它們，從而給用戶加載的幻覺，並給你訪問的高度和寬度。

Answer 3

我認爲你的函數的問題是在你的函數中創建一個新的圖像對象，然後在其中添加路徑，但是實際的圖像從未加載過。你想要做的是設置對象，添加路徑，然後什麼加載：

function showimage(image_path) { 
     imgobj = new Image(); 
     imgobj.src = image_path; 
     //load the image: 
     $(imgobj).load(function(){ 
      var aspectratio = imgobj.width/imgobj.height; 
      var newht = imgobj.height; 
      var newwd = imgobj.width; 
      if (($(window).height() - 100) < newht) { 
       newht = $(window).height() - 100; 
       newwd = newht*aspectratio; 
      } 
      if (($(window).width() - 100) < newwd) { 
       newwd = $(window).width() - 100; 
       newht = newwd/aspectratio; 
      } 
      $('#lightbox img').attr('height', newht); 
      $('#lightbox img').attr('width', newwd); 
      $('#lightbox').show(); 
     }); 
    } 

小提琴演示：http://jsfiddle.net/5d7mM/