javascript - Renew Loading JSON Repeat Last Post -

javascript - Renew Loading JSON Repeat Last Post -

i made json script bring posts json page , when user scroll downwards renew loading bring more posts , works great problem when json load first time repeat lastly post. here live demo of script. how can see when scroll downwards end script show more posts repeating lastly post called "automatic slideshow blogger 3d gallery".

html code

<div id="result-container"> <ol></ol> <span class="loading">memuat...</span> </div>

css code

#result-container { height:400px; width:400px; overflow:auto; margin:50px auto; font:normal normal 12px 'trebuchet ms',trebuchet,geneva,arial,sans-serif; } #result-container ol { margin:0 0; padding:0 0; background-color:#b5d68c; } #result-container li { margin:0 0; padding:0 0; list-style:none; } #result-container li:nth-child(even) {background-color:#a2c179} #result-container li { display:block; padding:5px 10px; font-weight:bold; color:#396b18; text-decoration:none; } #result-container li a:hover { background-color:#396b18; color:white; text-decoration:none; } #result-container .loading { display:block; height:26px; font:normal bold 11px/26px arial,sans-serif; color:white; text-align:center; background-color:#b75a6f; border-top:2px solid #222; } #result-container .loading.the-end {background-color:#666}

javascript code

var widget_config = { home_page: 'http://www.dte.web.id', // blog homepage container_id: 'result-container', // id of result container script_id: 'load-on-scroll-end-script', // id of asynchronous script max_result: 25, // max result post @ 1 time script loading end_text: 'habis' // end text if posts has been loaded }; var elem = document.getelementbyid(widget_config.container_id), inner = elem.getelementsbytagname('ol')[0], loading = elem.getelementsbytagname('span')[0], start = 0, // dynamic start-index max = widget_config.max_result; function grablist(json) { var list = json.feed.entry, link, skeleton = ""; if (list !== undefined) { (var = 0; < list.length; i++) { (var j = 0; j < list[i].link.length; j++) { if (list[i].link[j].rel == "alternate") { link = list[i].link[j].href; } } skeleton += '<li><a href="' + link + '">' + list[i].title.$t + '</a></li>'; } inner.innerhtml += skeleton; // insert list container loading.style.display = "none"; // hide loading indicator } else { // if json empty (list == undefined), // add together new class loading indicator called `the-end` loading.classname += ' the-end'; // replace loading indicator text `fully loaded!` illustration loading.textcontent = widget_config.end_text; } } // create indirect script loader 2 parameters: start-index , max-result post function updatescript(a, b) { var head = document.getelementsbytagname('head')[0], script = document.createelement('script'); script.type = 'text/javascript'; script.id = widget_config.script_id; script.src = widget_config.home_page + '/feeds/posts/summary?alt=json-in-script&start-index=' + + '&max-results=' + b + '&callback=grablist'; // if there old script in document... if (document.getelementbyid(widget_config.script_id)) { var oldscript = document.getelementbyid(widget_config.script_id); // remove old script, , replace new 1 has updated start-index value oldscript.parentnode.removechild(oldscript); } head.appendchild(script); } // start loading callback script start-index of 1 updatescript(1, max); // when container beingness scrolled... elem.onscroll = function() { // ... check scroll distance if ((this.scrolltop + this.offsetheight) == inner.offsetheight) { // if distance equal height of inner container... start++; // increment start value 1 // load new script updated start-index updatescript(start*max, max); // , show loading indicator loading.style.display = "block"; } };

seems api link starting on index 1 not taken consideration when fetching next page.

try updatescript(start*max + 1, max);

javascript jquery html css json