Metode ini masih sama dengan metode-metode penundaan pemuatan JSON yang biasa Saya lakukan untuk widget-widget Saya yaitu dengan cara menyisipkan script callback secara tidak pribadi ke dalam area <head> dengan ID tertentu. Kemudian, kalau Saya ingin memperbaharui muatan JSON yang sudah ada, Saya tinggal menyingkirkan script callback yang usang kemudian menggantinya dengan duplikat gres dengan parameter yang sudah diperbaharui.
Bayangkan saja bahwa sudah terdapat sebuah script callback dengan ID foo di dalam area <head> menyerupai ini:
... ... <script id="foo" src="../feeds/posts/summary?alt=json-in-script&callback=functionName"></script> </head>Kemudian Saya akan menyingkirkannya dengan cara menangkap ID elemen tersebut sebagai awalan untuk menyeleksi node induknya:
var a = document.getElementById('foo'); var parent = a.parentNode; // Mendapatkan elemen induk dari `foo`Kemudian, dari induk tersebut Saya akan menyingkirkan elemen itu sendiri:
var a = document.getElementById('foo'); var parent = a.parentNode; // Mendapatkan elemen induk dari `foo` parent.removeChild(a); // Singkirkan `foo` dari `parent`Di sini, kita akan melaksanakan pekerjaan di atas menurut event onscroll dengan batasan tamat berupa jarak gulungan maksimal kontainer. Kode di bawah ini akan menjalankan fungsi berjulukan myFunction() menurut event onscroll dengan syarat jarak gulungan telah mencapai titk maksimal:
elem.onscroll = function() { if ((this.scrollTop + this.offsetHeight) == inner.offsetHeight) { myFunction(); } };Dimana elem yaitu objek berupa kontainer.
Memulai Pekerjaan
Markup HTML
Kita mulai dengan pembuatan markup HTML sederhana menyerupai ini:
<div id="result-container" style="width:400px;height:400px;overflow:auto;"> <ol></ol> <span class="loading">Memuat...</span> </div>Elemen #result-container dipakai sebagai area scroll, elemen ol dipakai sebagai kontainer data yang nantinya akan dihasilkan dari JSON, dan elemen span.loading dipakai sebagai indikator sedang memuat.
Membangun JavaScript
Pertama-tama kita buat script untuk memparse data JSON menjadi elemen HTML. Sederhana, menyerupai script recent post biasa yang Saya beri nama grabList(), dan hanya akan menghasilkan elemen <li> dengan tautan dan judul posting di dalamnya:
var elem = document.getElementById('result-container'), // Mendapatkan elemen `#result-container` inner = elem.getElementsByTagName('ol')[0], // Mendapatkan elemen `ol` pertama loading = elem.getElementsByTagName('span')[0]; // Mendapatkan elemen `span` pertama (dalam hal ini yaitu elemen indikator sedang memuat) // Bangun sebuah script untuk menampilkan daftar posting function grabList(json) { var list = json.feed.entry, link, skeleton = ""; // Jalankan loop hanya kalau data JSON masih ada/dapat didefinisikan if (typeof list !== "undefined") { for (var i = 0; i < list.length; i++) { for (var j = 0; j < list[i].link.length; j++) { if (list[i].link[j].rel == "alternate") { link = list[i].link[j].href; // Mendapatkan URL posting break; } } // Bangun beberapa elemen `<li>` yang berisi tautan dan judul posting... skeleton += '<li><a href="' + link + '">' + list[i].title.$t + '</a></li>'; } // ... kemudian sisipkan elemen tersebut ke dalam elemen `<ol>` inner.innerHTML += skeleton; // dan sembunyikan indikator sedang memuat. loading.style.display = "none"; } else { // Jika data JSON sudah tidak ada (list === "undefined"), tambahkan kelas gres kepada elemen indikator sedang memuat dengan nilai `the-end` loading.className += ' the-end'; // kemudian ganti teks indikator sedang memuat dengan kata `Habis` loading.textContent = 'Habis'; } }Setelah itu buat sebuah fungsi untuk memuat script callback secara tidak langsung. Tambahkan dua buah parameter untuk menangani start-index dan max-results:
function updateScript(i, max) { var head = document.getElementsByTagName('head')[0], script = document.createElement('script'); script.type = 'text/javascript'; script.id = 'load-on-scroll-end'; script.src = 'http://nama_blog.blogspot.com/feeds/posts/summary?alt=json-in-script&start-index=' + i + '&max-results=' + max + '&callback=grabList'; head.appendChild(script); } // Jalankan fungsi! updateScript(1, 25);Fungsi di atas akan menyisipkan sebuah script callback JSON Blogger dengan nilai parameter start-index berupa 1 dan max-results berupa 25, sehingga sebuah elemen <script> dengan parameter yang sudah diatur akan disipkan ke dalam area <head> secara tidak pribadi menyerupai ini:
... ... ... <script id="load-on-scroll-end" src="//nama_blog.blogspot.com/feeds/posts/summary?alt=json-in-script&start-index=1&max-results=25&callback=grabList"></script> </head>Memperbaharui JSON Berdasarkan Jarak Maksimal Gulungan Area
Setelah itu kita tambahkan sebuah kondisional untuk menyingkirkan script callback usang kalau script tersebut ada. Tidak perlu menciptakan fungsi baru, cukup gunakan fungsi tadi semoga kita sanggup menggunakannya untuk dua hal sekaligus, yaitu menyisipkan script gres dan/atau menyingkirkan script usang (jika ada):
function updateScript(i, max) { var head = document.getElementsByTagName('head')[0], script = document.createElement('script'); script.type = 'text/javascript'; script.id = 'load-on-scroll-end'; script.src = 'http://nama_blog.blogspot.com/feeds/posts/summary?alt=json-in-script&start-index=' + i + '&max-results=' + max + '&callback=grabList';if (document.getElementById('load-on-scroll-end')) { var oldScript = document.getElementById('load-on-scroll-end'); oldScript.parentNode.removeScript(oldScript); } head.appendChild(script); } updateScript(1, 25); // Jalankan fungsi!Karena kita juga akan menjalankan fungsi updateScript() menurut event onscroll, maka kita juga harus memasukkan updateScript() ke dalam event yang Saya tuliskan pertama kali:
elem.onscroll = function() { if ((this.scrollTop + this.offsetHeight) == inner.offsetHeight) { // Muat ulang JSON Blogger dengan `start-index` yang gres melalui parameter `i` updateScript(i, 25); // Kemudian tampilkan indikator sedang memuat loading.style.display = "block"; } };Parameter i haru dinamis, dan harus sanggup bertambah setiap kali gulungan kontainer berakhir. Untuk membuatnya menjadi dinamis, kita akan memakai variabel awalan dengan nilai 0, kemudian kita tingkatkan nilainya di dalam event onscroll setiap kali jarak gulungan telah mencapai titik maksimal:
var start = 0;elem.onscroll = function() { if ((this.scrollTop + this.offsetHeight) == inner.offsetHeight) { // Tingkatkan nilai `start` dengan 1 (dari `start = 0` menjadi `start = 1`, `start = 2`, dst...)start++; // Muat ulang JSON Blogger dengan `start-index` yang telah diperbaharui... // ... melalui `start` yang nilainya dikalikan dengan 25 updateScript(start*25, 25); // => dari `(1, 25)` menjadi `(25, 25)`, `(50, 25)`, `(75, 25)`, dst... // Kemudian tampilkan indikator sedang memuat loading.style.display = "block"; } };Produk Final
HTML
<div id="result-container"> <ol></ol> <span class="loading">Memuat...</span> </div>CSS
#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 a { 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
var widget_config = { home_page: 'http://nama_blog.blogspot.com', // Your blog homepage container_id: 'result-container', // ID of the result container script_id: 'load-on-scroll-end-script', // ID of the asynchronous script max_result: 25, // Max result post at once script loading end_text: 'Habis' // End text if all 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 (typeof list !== "undefined") { for (var i = 0; i < list.length; i++) { for (var j = 0; j < list[i].link.length; j++) { if (list[i].link[j].rel == "alternate") { link = list[i].link[j].href; break; } } skeleton += '<li><a href="' + link + '">' + list[i].title.$t + '</a></li>'; } inner.innerHTML += skeleton; // Insert the list to the container loading.style.display = "none"; // Hide the loading indicator } else { // If the JSON is empty (list === "undefined"), // add a new class to the loading indicator called `the-end` loading.className += ' the-end'; // Replace the loading indicator text into `fully loaded!` for the example loading.textContent = widget_config.end_text; } } // Make an indirect script loader with two parameters: start-index and 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=' + a + '&max-results=' + b + '&callback=grabList'; // If there is an old script in the document... if (document.getElementById(widget_config.script_id)) { var oldScript = document.getElementById(widget_config.script_id); // Remove the old script, and replace with the new one that has an updated start-index value oldScript.parentNode.removeChild(oldScript); } head.appendChild(script); } // Start loading the callback script with start-index of 1 updateScript(1, max); // When the container is being scrolled... elem.onscroll = function() { // ... check the scroll distance if ((this.scrollTop + this.offsetHeight) == inner.offsetHeight) { // If the distance equal to the height of the inner container... start++; // Increase the start value by one // then load the new script with an updated start-index updateScript(start*max, max); // and show the loading indicator loading.style.display = "block"; } };