経緯
ページの下までスクロールしたら
自動的にコンテンツを取得する
『jQuery.Bottom』があります
詳細は以下参照
こちらのプラグインを導入しています
「Twitter」や「Facebook」もみたいで
スマフォサイトっぽくてかっこいいです
ソース
このプログラムは初期読み込みと自動的に読み込み
部分でわかれいます
<meta charset="utf-8"> <meta name="robots" content="noindex,follow"> <title>jQuery Bottom Demo</title> <style> body { margin: 20px; } #image { margin: 20px 0 0 10px; } </style> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script> <script type="text/javascript" src="jquery.bottom-1.0.js"></script> <script type="text/javascript"> var dummy = 'テスト'; var number = 51; $(function() { $(window).bottom({proximity: 0.05}); $(window).on('bottom', function() { var obj = $(this); if (!obj.data('loading')) { obj.data('loading', true); $('#image').html('<img src="loader.gif" />'); setTimeout(function() { $('#image').html(''); for (i=0; i<20; i++, number++) { $('#wrap div:last').append('<div>'+dummy+number+'</div>'); } obj.data('loading', false); }, 3000); } }); $('html,body').animate({ scrollTop: 0 }, '1'); }); <!-- 上記が自動的に読み込む所 --> </script> <h1>jQuery Bottom プラグインデモ</h1> <p>一番下までスクロールすればコンテンツを追加表示します</p> <!-- 初期読み込み start --> <div id="wrap"> <div>テストデータ1</div> <div>テストデータ2</div> <div>テストデータ3</div> <div>テストデータ4</div> <div>テストデータ5</div> <div>テストデータ6</div> <div>テストデータ7</div> <div>テストデータ8</div> <div>テストデータ9</div> <div>テストデータ10</div> </div> <!-- 初期読み込み end --> <div id="image"></div>
プラグインの注意点
この初期に読み込むのが少ないと
下記のbottomのイベントが起きません
$(window).bottom({proximity: 0.05});
つまり初期の読み込むで
必ずイベントが起きる件数読み込むつくり
しなけらばならないです
愚痴
今回はこちらのプラグインを
使用したプログラムで「バグ」がおきました
初期イベントが起きない状況が
2016/01/31に起きました
なんで1年以上前にリリースしたプログラムのバグが
なぜ「日曜日」に発動するねん!!
俺の休み返せ!!
プログラムを作った人はやめていて
愚痴が言えない状況
遠隔で入れる環境だと
土日も平気で電話されます
T_T