続きが気になるでおじゃる
良くあるパターン、もっと見る
一回一回通信を行うのではなく、画像プリロードを随時かけていこうという
そんな手法です。
デモっぽいもの
違いがよく分かるデモを用意しました。
※キャッシュが入ってしまうので、表示後スーパーリロード(Ctrl+F5)またはキャッシュをクリアしてリロードしてください。
2と3は正直そこまで変わらないとは思いますが
1は断然早いです。ふふふ。
どうやってしてんねん!の簡単な解説
どうしてるって、もうこんな感じでimgタグを生成してます。
<img src="./img/dummy.png" data-imgSrc="./img/aircraftCarrier-001.jpg" width="218" height="300">
imgタグってのはdisplay:noneしようが、visibility: hiddenしようが
問答無用でリクエストを投げてロードするわけです
なので、デフォルトのsrcには1x1の透明pngを読ませています。
1つ読めば終わりなので最初の読み込みはこれで終わり。簡単軽いですね
で、本命の画像はdata-imgSrcという所に書いています。
必要なときにここから取ってきて、本来のsrc部分に埋め込んでいくってわけです。
htmlソース
一部抜粋です。
<div id="imgList"> <div> <!-- コンテンツ1 --> </div> <div> <!-- コンテンツ2 --> </div> <div> <!-- コンテンツ3 --> </div> </div> <div class="moreBtn"> <p><a href="javascript:void(0);" id="newMore">もっと見る</a></p> <p><a href="#" id="newMore">一覧へ</a></p> </div>
#imgListを親として、その子供のdiv要素を1コンテンツとして順番に出しています。
1ブロック=1コンテンツで考えていますのでdivです。
そして、レガシーブラウザの事をきちんと考えてあげているのでdivです!!!!!
JSソース
$(function(){ var viewMoreCnt = 0, // 新着用 viewMoreMaxCnt = $('#imgList').children().length; // 新着用 //------------------------------------------- // 新着用の初期動作 //------------------------------------------- moreInit(); /*-------------------------------------------- * * イベントバインド * もっと見る * --------------------------------------------*/ $('#newMore').on('click',function() { var thisCnt = viewMoreCnt, nextElem = $('#imgList').children().eq(viewMoreCnt), nextElemOffsetTop; //-------------------------------------------------- // 次の要素の画像をセット // カウントが更新されるのでエレメント変数書き換え //-------------------------------------------------- viewMoreCnt = viewImg(nextElem,viewMoreCnt); //------------------------------------------- // 次の要素を表示させる //------------------------------------------- nextElem.slideDown(400); nextElemOffsetTop = $('#imgList').children().eq(thisCnt).offset().top; $('body,html').animate({scrollTop:nextElemOffsetTop}, 400, 'swing'); //------------------------------------------- // 次がもう無い場合は切替 //------------------------------------------- if(viewMoreMaxCnt == viewMoreCnt) { $('.moreBtn').children().eq(0).hide(); $('.moreBtn').children().eq(1).show(); } else { //------------------------------------------- // 次の要素をプリロードしておく //------------------------------------------- nextElem = $('#imgList').children().eq(viewMoreCnt); nextPreload(nextElem,viewMoreCnt); } }); /********************************************** * * moreInit * もっと見る系の初期値設定 * * @param none * @return none * **********************************************/ function moreInit() { var thisElem = $('#imgList').children().eq(viewMoreCnt); //------------------------------------------- // 次に表示させる画像をプリロードする //------------------------------------------- nextPreload(thisElem,viewMoreCnt); //------------------------------------------- // 次に表示させる画像を表示させる //------------------------------------------- viewMoreCnt = viewImg(thisElem,viewMoreCnt); thisElem = $('#imgList').children().eq(viewMoreCnt); //------------------------------------------- // 次に表示させる画像をプリロードする //------------------------------------------- nextPreload(thisElem,viewMoreCnt); } /********************************************** * * nextPreload * 次表示予定の画像群を一括プリロード * * @paran nextCnt int 対象要素のカウント * @return none * **********************************************/ function nextPreload(elememt,nextCnt) { var srcArr = new Array(); i = 0; elememt.find('img').each(function() { srcArr.push($(this).attr('data-imgSrc')); i++; }); preloadImages(srcArr); } /********************************************** * * viewImg * 画像自体はプリロード済なので * data-imgSrcをsrcに入れて実画像表示状態にする * * @paran nextCnt int 対象要素のカウント * @return nextCnt int 対象要素のカウント(カウントアップ済) * **********************************************/ function viewImg(elememt,nextCnt) { elememt.find('img').each(function() { $(this).attr('src',$(this).attr('data-imgSrc')); }); nextCnt++; return nextCnt; } /********************************************** * * preloadImages * プリロード本処理 * * @param none * @return none * **********************************************/ function preloadImages(srcArr) { for(var i = 0; i<srcArr.length; i++) { $("<img>").attr("src", srcArr[i]); }; }; });
【preloadImages】【viewImg】【nextPreload】は本処理として
流用できるように作っているので、実際に複数の「もっとみる」が入る場合は
最初の変数定義の所とイベントバインドとinit関数をコピペして作って上げれば
他干渉はしないはずですので大丈夫だと思われます。
補足
もっと見るがない所には読み込ませないようにしてください。
また、不要なイベントバインドなどもさせないよう、他から丸コピする時は
ご注意ください!