概要
DataTablesを使った画像のあるテーブルで、画面切り替え時に画像の遅延表示がうまくいかなかったので試行錯誤した結果メモ。
注意点
・Bootstrap v3.3.7
・jqueryは別途必要
・DataTablesではthead,tbodyは必須なので忘れないように
・画像遅延はLayzr.js
・Layzrはversion2系は動かし方が分からないので1.4.3です
html側
<html>
<head>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs-3.3.7/dt-1.10.18/af-2.3.3/b-1.5.6/fh-3.1.4/kt-2.5.0/r-2.2.2/sc-2.0.0/sl-1.3.0/datatables.min.css" />
<!-- 他のstyle処理 -->
<!-- jquery.cssやjquery.js -->
<!-- bootstrapもここでいれる -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/layzr.js/1.4.3/layzr.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/v/bs-3.3.7/dt-1.10.18/af-2.3.3/b-1.5.6/fh-3.1.4/kt-2.5.0/r-2.2.2/sc-2.0.0/sl-1.3.0/datatables.min.js"></script>
</head>
<body>
<table id="main-table">
<thead>
<tr>
<th>img</th>
</tr>
</thead>
<tbody>
<tr>
<td><img data-layzr="/img/sample.jpg"></td>
</tr>
<tr>
<td><img data-layzr="/img/sample.jpg"></td>
</tr>
<tr>
<td><img data-layzr="/img/sample.jpg"></td>
</tr>
<!-- 以下、trの繰り返し -->
</tbody>
</table>
</body>
</html>
javascript側
<!-- 初期読み込み -->
<script>
window.addEventListener('load', function () {
var layzr = new Layzr();
}, false);
</script>
<!-- 画面切り替え時 -->
<script>
$(function(){
$("#main-table").DataTable(
{
drawCallback: function(){
new Layzr();
}
}
);
});
</script>