初めまして、Javascriptにとても苦戦しております。
現在、色んなサイトを見てここまでJavascriptを書いています。
これは、JSONファイルを読み込み商品を表示させるものです。
しかし、ページの一番下までいかないと次の48件が読み込む事が出来ません。
今教えていただきたいのは、一番下までいかなくても商品が出てくるような仕組みにしたいと考えています。
例えば下から300pxの所で新しい商品を表示させる事ができれば
一番嬉しいです。
お手数お掛け致しますが、ご教示いただければと思います。
宜しくお願い致します。
-----ここからソース------------------
$(function(){
var setArea = $('#loadarea'),
loadNum = 48, // 読み込む個数
loadTxt = '', // Loading中の表示テキスト
fadeSpeed = 500; // フェードスピード
$(window).load(function(){ var adjScrTop = $(document).scrollTop(); $('html,body').animate({scrollTop:(adjScrTop)-1},0); $.ajax({ url: '/js/itemlist.json', dataType: 'json', success : function(data){ var dataLengh = data.length, loadItemLength = setArea.find('.loadItem').length, setAdj = (dataLengh)-(loadItemLength), setBeg = (dataLengh)-(setAdj); if(!(dataLengh == loadItemLength)){ setArea.append('<div id="nowLoading">' + loadTxt + '</div>'); if(loadItemLength == 0){ for (var i=0; i<loadNum; i++) { $('<div class="loadItem col-xs-4 col-sm-3" id="item' + data[i].itemNum + '"><p class="item_image"><a href="' + data[i].item_url + '"><img src="' + data[i].item_pict + '" alt="' + data[i].item_name + '"></a><img src="images/' + data[i].classification + '.png" class="new_m"></p><p class="item_name"><a href="' + data[i].item_url + '">' + data[i].item_name + '</a></p></div>').appendTo(setArea).css({opacity:'0'}).animate({opacity:'1'},fadeSpeed); } } else if(loadItemLength > 0 && loadItemLength < dataLengh){ if(loadNum < setAdj){ for (var i=0; i<loadNum; i++) { v = i+setBeg; $('<div class="loadItem col-xs-4 col-sm-3" id="item' + data[v].itemNum + '"><p class="item_image"><a href="' + data[v].item_url + '"><img src="' + data[v].item_pict + '" alt="' + data[v].item_name + '"></a><img src="images/' + data[v].classification + '.png" class="new_m"></p><p class="item_name"><a href="' + data[v].item_url + '">' + data[v].item_name + '</a></p></div>').appendTo(setArea).css({opacity:'0'}).animate({opacity:'1'},fadeSpeed); } } else if(loadNum >= setAdj){ for (var i=0; i<setAdj; i++) { v = i+setBeg; $('<div class="loadItem col-xs-4 col-sm-3" id="item' + data[v].itemNum + '"><p class="item_image"><a href="' + data[v].item_url + '"><img src="' + data[v].item_pict + '" alt="' + data[v].item_name + '"></a><img src="images/' + data[v].classification + '.png" class="new_m"></p><p class="item_name"><a href="' + data[v].item_url + '">' + data[v].item_name + '</a></p></div>').appendTo(setArea).css({opacity:'0'}).animate({opacity:'1'},fadeSpeed); } } } else if(loadItemLength == dataLengh){ return false; } } else { return false; } }, complete : function(){ $('#nowLoading').each(function(){ $(this).remove(); }); return false; } }); }).scroll(function(){ scrollLoad(); }); function scrollLoad(){ var winHeight = window.innerHeight ? window.innerHeight : $(window).height(), posBottom = $(document).height() - winHeight; if($(this).scrollTop() == posBottom) { var adjScrTop = $(document).scrollTop(); $('html,body').animate({scrollTop:(adjScrTop)-1},0); $.ajax({ url: 'js/itemlist.json', dataType: 'json', success : function(data){ var dataLengh = data.length, loadItemLength = setArea.find('.loadItem').length, setAdj = (dataLengh)-(loadItemLength), setBeg = (dataLengh)-(setAdj); if(!(dataLengh == loadItemLength)){ setArea.append('<div id="nowLoading">' + loadTxt + '</div>'); if(loadItemLength == 0){ for (var i=0; i<loadNum; i++) { $('<div class="loadItem col-xs-4 col-sm-3" id="item' + data[i].itemNum + '"><p class="item_image"><a href="' + data[i].item_url + '"><img src="' + data[i].item_pict + '" alt="' + data[i].item_name + '"></a><img src="images/' + data[i].classification + '.png" class="new_m"></p><p class="item_name"><a href="' + data[i].item_url + '">' + data[i].item_name + '</a></p></div>').appendTo(setArea).css({opacity:'0'}).animate({opacity:'1'},fadeSpeed); } } else if(loadItemLength > 0 && loadItemLength < dataLengh){ if(loadNum < setAdj){ for (var i=0; i<loadNum; i++) { v = i+setBeg; $('<div class="loadItem col-xs-4 col-sm-3" id="item' + data[v].itemNum + '"><p class="item_image"><a href="' + data[v].item_url + '"><img src="' + data[v].item_pict + '" alt="' + data[v].item_name + '"></a><img src="images/' + data[v].classification + '.png" class="new_m"></p><p class="item_name"><a href="' + data[v].item_url + '">' + data[v].item_name + '</a></p></div>').appendTo(setArea).css({opacity:'0'}).animate({opacity:'1'},fadeSpeed); } } else if(loadNum >= setAdj){ for (var i=0; i<setAdj; i++) { v = i+setBeg; $('<div class="loadItem col-xs-4 col-sm-3" id="item' + data[v].itemNum + '"><p class="item_image"><a href="' + data[v].item_url + '"><img src="' + data[v].item_pict + '" alt="' + data[v].item_name + '"></a><img src="images/' + data[v].classification + '.png" class="new_m"></p><p class="item_name"><a href="' + data[v].item_url + '">' + data[v].item_name + '</a></p></div>').appendTo(setArea).css({opacity:'0'}).animate({opacity:'1'},fadeSpeed); } } } else if(loadItemLength == dataLengh){ return false; } } else { return false; } }, complete : function(){ $('#nowLoading').each(function(){ $(this).remove(); }); return false; } }); return false; } }
});
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2015/08/26 00:39