無法將無限滾動集成到現有的工作 JSON 腳本

Question

我開發了一個 phonegap 應用程序，其中有一個頁面 photos.html，它在 JSON 的幫助下從我的服務器獲取照片。

我已經設法使用 JSON 獲取服務器上存儲在我的 MySQL 數據庫中的所有照片，在嘗試所有無限滾動插件后我唯一無法實現的是將無限滾動集成到我現有的 JSON 腳本中。

目前，我的 JSON 腳本一次性顯示存儲在數據庫中的所有圖像，這使頁面變慢。 我只是希望默認情況下應該顯示 8 個帖子，一旦用戶滾動頁面，接下來的 8 個帖子就應該顯示，依此類推，直到數據庫中的最后一個條目。

任何想法我怎么能做到這一點。 下面是我的代碼...

<!DOCTYPE html>
<html>
<head>
<style>
.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } 
.embed-container img { position: absolute; top: 0; left: 5%; width: 90%; height: 100%; }
.btnamit4u
{
width:90%;
left:5%;
position:relative;
height:100%;
color:#fff;
background:#E66113;
text-transform:uppercase;
font-size:16px;
font-weight:bold;
padding:10px;
border-radius:10px;
margin-bottom:10px;
margin-top:10px;
}
</style>
</head>
<body>
<div id="id01"></div>

<script>
var xmlhttp = new XMLHttpRequest();
var url = "http://www.amit4uservices.com/hh/json.php";

xmlhttp.onreadystatechange=function() {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
        myFunction(xmlhttp.responseText);
    }
}
xmlhttp.open("GET", url, true);
xmlhttp.send();

function myFunction(response) {
    var arr = JSON.parse(response);
    var i;
    var out = "";

    for(i = 0; i < arr.length; i++) {
        out += "<div class='embed-container'><img src='" + 
        arr[i].url +
        "'/> <br></div>";
        out += " <button class='btnamit4u' onclick=\"window.plugins.socialsharing.share('Boliye , Hamare Hanuman', null, '"+ arr[i].url + "', 'http://goo.gl/x37m8R')\">Share It</button>";
    }
    //out += "</div>";
    document.getElementById("id01").innerHTML = out;
}
</script>

</body>
</html>

非常感謝。

Answer 1

我拿了你的代碼並嘗試制作一些東西，當然沒有小提琴它有點。

編輯：固定代碼，現在工作。

一探究竟：

var xmlhttp = new XMLHttpRequest();
var url = "http://www.amit4uservices.com/hh/json.php";
var currIndex = 0;
var arr;
var myDiv = document.getElementById("id01");

xmlhttp.onreadystatechange=function() {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
        arr = JSON.parse(xmlhttp.responseText);
        myFunction(8);
    }
}
xmlhttp.open("GET", url, true);
xmlhttp.send();

function myFunction(elementsToCreate) {
    var i;
    var out = "";

    for(i = 0; i < elementsToCreate && ((currIndex+1) < arr.length); i++, currIndex++) {
        out += "<div class='embed-container'><img src='" + 
        arr[currIndex].url +
        "'/> <br></div>";
        out += " <button class='btnamit4u' onclick=\"window.plugins.socialsharing.share('Boliye , Hamare Hanuman', null, '"+ arr[currIndex].url + "', 'http://goo.gl/x37m8R')\">Share It</button>";
    }
    //out += "</div>";
    myDiv.innerHTML += out;
}

document.addEventListener("scroll",function(ev){
    if(1000 > (document.body.scrollHeight - document.body.scrollTop)){
        myFunction(8);
    }
},false);

小提琴： http : //jsfiddle.net/12j3mgku/

無法將無限滾動集成到現有的工作 JSON 腳本

問題描述

1 個解決方案

解決方案1
0 2015-09-10 19:13:39

無法將無限滾動集成到現有的工作 JSON 腳本

問題描述

1 個解決方案

解決方案1 0 2015-09-10 19:13:39

解決方案1
0 2015-09-10 19:13:39