使用jquery獲取動態圖像的客戶端圖像寬度

Question

我試圖編寫一個燈箱，當單擊div時顯示容器內的圖像。

說div有實際的圖像作爲背景圖像顯示，作爲縮略圖。

這些圖像將由用戶加載，所以我沒有他們的實際寬度和高度。

所以我有一堆div與圖像作爲背景和一個容器，圖像（具有空的src）和每次點擊縮略圖時顯示的說明燈箱。

對於這一點，我用這個：

//設置圖像和收藏的描述

  var imageToDisplay = $(this).siblings(".selfieImage") 
            .css("background-image") 
            .replace(/"/g, "") 
            .replace(/url\(|\)$/ig, ""); 

      var descToDisplay =  $(this).siblings(".selfieImage") 
            .attr("data-description"); 

      $('.lightBoxImage').attr('src', imageToDisplay); 
      $('.lightBoxDescription').text(descToDisplay); 

事情是我不知道的描述是要去多久是，寬度的容器沒有設置，因爲它會佔用較大元素的寬度。但是，它的高度始終是屏幕的50％，因此圖像會改變其原始大小。

我想將生成的圖像的寬度設置爲容器的寬度，因此描述文本將包裝在圖像的底部。

我該怎麼做？我在這裏閱讀了很多答案，但是這些看起來都不起作用，因爲當我加載頁面時，我已經使用0,0尺寸創建了我的lightbox圖像。我只是改變它的源代碼，所以onload和ready函數不能按預期工作。

Answer 1

根據我的理解，您可以嘗試創建圖像對象並在onload處理程序中設置容器寬度和.lightBoxImage的src，如下所示。

var image = new Image(); 
image.onload = function(){ // always fires the event when the image is loaded. 
    $('containerSelector').css({ 
     width: image.width; 
    }); 
    $('.lightBoxImage').attr('src', imageToDisplay); 
}; 
// handle failure 
image.onerror = function() {}; 
// set the src 
image.src = imageToDisplay;