続きが気になるでおじゃる
良くあるパターン、もっと見る
一回一回通信を行うのではなく、画像プリロードを随時かけていこうという
そんな手法です。
デモっぽいもの
違いがよく分かるデモを用意しました。
※キャッシュが入ってしまうので、表示後スーパーリロード(Ctrl+F5)またはキャッシュをクリアしてリロードしてください。
２と３は正直そこまで変わらないとは思いますが
１は断然早いです。ふふふ。
どうやってしてんねん！の簡単な解説
どうしてるって、もうこんな感じでimgタグを生成してます。
<img src="./img/dummy.png" data-imgSrc="./img/aircraftCarrier-001.jpg" width="218" height="300">
imgタグってのはdisplay:noneしようが、visibility: hiddenしようが
問答無用でリクエストを投げてロードするわけです
なので、デフォルトのsrcには1x1の透明pngを読ませています。
１つ読めば終わりなので最初の読み込みはこれで終わり。簡単軽いですね
で、本命の画像はdata-imgSrcという所に書いています。
必要なときにここから取ってきて、本来のsrc部分に埋め込んでいくってわけです。
htmlソース
一部抜粋です。
<div id="imgList">
<div>
<!-- コンテンツ１ -->
</div>
<div>
<!-- コンテンツ２ -->
</div>
<div>
<!-- コンテンツ３ -->
</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要素を１コンテンツとして順番に出しています。
１ブロック=１コンテンツで考えていますので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関数をコピペして作って上げれば
他干渉はしないはずですので大丈夫だと思われます。
補足
もっと見るがない所には読み込ませないようにしてください。
また、不要なイベントバインドなどもさせないよう、他から丸コピする時は
ご注意ください！
