loading="lazy" を自動で付与したい

Question

webサイトの画像表示遅延をするため、imgタグに loading="lazy" を自動で付与するScriptを考えています。
初め以下のようなものを作ってみました。

$(document).ready( function(){
$('img').attr('loading', 'lazy');
});

確かにloading属性は付与されましたが、画像表示⇒loading属性付与となっているようで、遅延させたい画像が最初にすべてロードされてしまいます。

JQueryなどで一括でimgタグに loading="lazy" が付与でき、画像表示遅延させることは可能でしょうか。
ご教授ください。

Comments

[m.ts10806]

なぜ後付けする必要があるのでしょうか。

[kake_12]

今まで付与されていない画像に対して、自動で後付けできないか考えております。

Answer 1

最初からHTML要素に埋め込めばよいような気がしますが
一旦srcを止めてloadingを埋め込むとかですかね・・・
（それが有効かどうかはちょっとわかりません）

$(function(){
  $('img').attr('data-src',function(){return $(this).attr('src');}).attr('src','').attr('loading','lazy').attr('src',function(){return $(this).data('src');});
});