在不使用JS的情況下延遲加載圖像

Question

我想推遲在HTML文件中加載圖像，直到加載所有其他資源或設定的時間。 我想在沒有JS的情況下這樣做。

我已經使用了在我們的Web應用程序中使用JS的延遲圖像加載技術。 但是，這個應用程序的一個版本在沒有JS的情況下運行，如果可能的話我想擁有相同的功能。 我發布了這個希望可能有一些鮮為人知的HTML5屬性，我可以用它。 歡迎任何解決方法。

裝載priotity

如果可能的話，將圖像加載到塊中是很好的。 我很好，即使它只是一個塊也是如此。

注意：我已經考慮過只為JS應用程序延遲加載並立即為我的純HTML版本加載圖像（如此處所述），這是我的后備。

Answer 1

如果您要定位Chrome瀏覽器，則Chrome會引入本機圖像延遲加載，這意味着您無需為此安裝任何其他第三方庫。

使用本機圖像延遲加載，您應該在img html標記中添加loading屬性，如下所示：

<img src="..." loading="lazy" width="200" height="200">

另外，請確保安裝了最新版本的Chrome瀏覽器。

有關詳細信息，請參閱此參考： https ： //web.dev/native-lazy-loading#image-loading

希望它可能會有所幫助。