獲取圖像的高度以設置模態窗口大小

我正在創建一個帶有縮略圖的照片庫並將調整後的圖像加載到模態窗口中。獲取圖像的高度以設置模態窗口大小

問題是我想獲取圖像的高度和寬度來設置模態窗口的高度，但是未在模態窗口或我的圖像容器中設置高度。

圖像的src最初並不在我的標記中，但是我通過在標籤上添加它來將它添加到標記中。

原始縮略圖

<img src="\images\picture1.jpg" height="150" width="150" id="thumbnail">

jQuery代碼：

var tImageID = $(this).find('img').attr('id', 'thumbnail'); 
    var fullURL  = $(tImageID).attr('src'); 
    var dFigure  = $('#dialog-media figure .media'); 

    // fullSrcURL = "\images\picture_resized.jpg" 
    var fullSrcURL = fullURL.replace(".jpg", "_resized.jpg"); 


    // Add html to the div tag 
    $(dFigure).append('<img id="resized-pic" src="' + fullSrcURL + '" alt="' + $(tImage).attr('alt') + '" />'); 


    var objHeight = $("#resized-pic").height(); 
    var objWidth = $("#resized-pic").width(); 

    // Perform some other code here 
    // Some more logic 

    //Set the positioning of the modal window with theses CSS properties 
    $('.ui-dialog').css('left', '0'); 
     $('.ui-dialog').css('right', '0'); 
     $('.ui-dialog').css('margin', '0 auto'); 
     $('.ui-dialog').css('width', objWidth); 
     $('.ui-dialog').css('height', ObjHeight); 
     $('.ui-dialog').css('top', '5%');

圖片加載了，但objWidth，看着螢火蟲時objHeight顯示爲零。

我刷新我的頁面，點擊相同的縮略圖，圖片加載模式內的圖像，模式的高度設置正確。

這是因爲圖片還沒有完全加載，這就是爲什麼它是零？還是因爲它被緩存？

感謝

乾杯

來源

2013-10-02 Moxie C

我猜它，因爲圖像仍在加載。看看我的答案，如果這不起作用，你可以做一個演示問題的小提琴嗎？ http://jsfiddle.net/ – Trevor

我注意到的另一件事是'ObjHeight'在設置css時被大寫而不是'objHeight'。不要以爲你的問題。你能爲我演示一個小提琴嗎？ – Trevor

@Trevor

我發現我需要這個代碼：

 image= new Image(); 
     image.onload = onLoadHandler; // Checks to ensure the image has been loaded 
     image.src=fullSrcURL; 

     function onLoadHandler() { 

      //Put in logic here once the image has been loaded 

     }

來源

2013-10-07 15:52:45

獲取圖像的高度以設置模態窗口大小

回答

相關問題