JQuery
tableでの大量データの描画[その１]
ヤス
更新日:2021/08/04
はじめまして、ヤスです。
気になる情報からこんなんええやん的な技術まで、サクサクと紹介して行きたいと思います。
【本日のこんなんええやん】
WEBシステムを作っていると必ずぶちあたる大量データの描画
- DOM描画に時間が掛かる…
- スクロールでヘッダが隠れる…
課題はさまざまあります、、。
今回は画面をスクロールする毎にデータを描画して、描画負荷を減らすにチャレンジ！
ご用意するのは以下のもの。
- HTML
- CSS
- jQuery
まず、描画を隠すCSSを用意
|
1 2 3 |
.hidden{ display:none; } |
一定の行数以上にhiddenクラスを指定
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<table> <tr></tr> <tr></tr> <tr></tr> <tr></tr> <tr></tr> <tr></tr> ・・・ <tr class="hidden"></tr> <tr class="hidden"></tr> <tr class="hidden"></tr> <tr class="hidden"></tr> <tr class="hidden"></tr> </table> |
スクロールごとにclassを消していきます！
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
// 最初のポジション var start_pos = 0; // windowスクロールイベント取得 $(window).scroll(function(){ // hiddenクラスある？ if($(".hidden").length > 0){ var current_pos = $(this).scrollTop(); // ダウンスクロールかどうか if (current_pos > start_pos) { // hiddenクラスをくるくる $(".hidden").each(function(idx, obj){ // 上から順にhiddenを消す $(obj).removeClass("hidden"); // 1スクロールで15行表示 if((idx + 1) % 15 == 0){ return false; } }); } // アップスクロール制御用 start_pos = current_pos; } }); |
こんな感じですが、まだまだ力技。。
日々精進します！
