masalibの日記

システム開発、運用と猫の写真ブログです

『jQuery.Bottom』のプラグインの注意点jQuery Bottom Demo

経緯

ページの下までスクロールしたら
自動的にコンテンツを取得する
jQuery.Bottom』があります
詳細は以下参照

www.koikikukan.com

こちらのプラグインを導入しています
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