圖像的高度和寬度自動嗎？

Question

是否可以使我的img標簽出於性能目的自動生成其width和height屬性？

通常，有關網絡性能的文章指出，包含其width和height屬性標簽的圖像可能會更快加載，從而使瀏覽器不必在加載過程中搜索這些值。

Answer 1

width和height屬性不會使圖像加載更快，並且瀏覽器也不會“搜索”這些值。 添加它們的作用是在頁面上創建一個占位符，該占位符使瀏覽器可以在頁面的其他適當位置呈現其他元素，而不必在圖像最終加載后重新排版頁面。

要回答您的問題，除了某些服務器端解決方案之外，沒有其他方法可以自動生成這些屬性，該解決方案從文件中檢索圖像的寬度和高度，然后根據該屬性將屬性寫入頁面。 但是，除非您已經在進行其他圖像處理（例如生成縮略圖），否則這是過大的，並且可能會比在客戶端上浪費更多的時間在服務器端浪費時間。

此外，在某些情況下，例如實施響應式設計，實際上最好不要添加屬性，因為您需要將其留給瀏覽器來確定頁面應該如何流動以及圖像應基於設備的分辨率顯示。

Answer 2

我相信這不是加載速度更快的問題，而是渲染速度更快的問題...

無論如何，您可以使用jQuery生成那些屬性，但是它可能不會改變任何東西，因為jQuery還需要時間來更改那些屬性，並且圖像應該已經加載以獲得其尺寸。

從API中 ：

如果代碼依賴於已加載的資產（例如，如果需要圖像的尺寸），則應將代碼放置在用於加載事件的處理程序中。