使用相同尺寸的Lazy Load修復圖像包裝大小圖像

Question

我正在尋找在延遲加載之前顯示背景顏色圖像，圖像尺寸完全相同。我的腳本獲取每個圖像和應用程序在圖像包裝上的寬度和高度。

我的腳本：

$(document).ready(function(){ 
    $('section .lazywrap').each(function(){ 

     var lazyWrap = $(this); 
     var img = $(lazyWrap, this); 

     lazyWrap.width(img.width()); 
     lazyWrap.height(img.height()); 

     console.log(lazyWrap.height()); 
    }); 
}); 

我的html：

<a href="/" class="lazy-wrap"> 
    <img class="lazy" width="472" src="img.jpg" data-original="img.jpg" > 
</a> 

的問題是：

Web瀏覽器可以得到，即使它不是在實現高價值<img>，但只限於ima由於惰性加載，在加載頁面時在視口中可見的ges。

我讀了很多有關響應背景圖像的事情，使用填充底部的技巧，但在我的情況下，我真的需要在此「背景預覽」中實際的寬度和高度值，而不是比率。我的所有圖像都有不同的高度值。

感謝您的幫助。

Answer 1

最後，我發現了一個替代解決方案，帶有延遲加載插件調用lazysizes。它允許使用具有完全大小的背景色而不是正在加載的圖像。