最終更新日 2021年05月23日
DataTablesに含まれる画像は表示の有無に関わらずすべて読み込まれてしまうようです。
数件や数十件の場合は問題ないのですが、数千件とかになった場合を考えると延滞読み込みをしておく必要があると思います。
画像の延滞読み込みはいくつか方法がありますが、今回の方法はライブラリなどを使用していないため非表示シンプルに実装できたのではないかと思います。
まず、imgタグのsrcをsrc-dataに変更します。
これで自動的に読み込まれなくなります。
lazy_load.html
...
<td><img data-src="./img/apple.jpg"></td>
...
次にDataTablesのdrawCallback内でdata-srcをsrcに設定し読み込んであげます。
毎回実行されちゃうのでdata-srcを削除するのを忘れずに！
lazy_load.js
$('#tbl_products').DataTable({
...
drawCallback: function() {
var imgs = document.querySelectorAll("img");
var data_src;
for (var i = 0; i < imgs.length; i++) {
data_src = imgs[i].getAttribute('data-src');
if (data_src) {
imgs[i].src = data_src;
imgs[i].onload = function() {
this.removeAttribute('data-src');
};
}
}
},
...
});
ちなみにletとかconstを使ってないのは念の為です。
２０２３年の１月まではね…。
出来ればその前に利用者ゼロになって下さい。🙏
最後に通常読み込み（下）と延滞読み込み（上）の比較です。
表示されていない画像が読み込まれていないのが分かると思います。
コード全体はこちらからどうぞ。