0

だから私は、無限スクロール機能が添付されたフォルダーから画像を表示する Web サイトを作成しています。唯一の問題は、ランダムな画像を選択してその画像のパスを返すphpファイルからjsonを呼び出す「createImge」関数を呼び出すJavaScriptの関数があることです。問題は、 createImage を連続して複数回呼び出すと、同じ画像が返され、php がファイルを選択するための新しい乱数を作成しないことです。createImg() を取得して、連続して複数回呼び出されたときに php に別の乱数を選択させる方法についてのアイデアはありますか?

index.html コード:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Request json test</title>
<script src="http://code.jquery.com/jquery-1.5.js"></script>
<script type="text/javascript">

var totalLoad;
var loadedImg=new Array();
var maxLoaded=20;
var loadFirst=5;
var bufferLoad=3;
var imgSrc;

function loadTop(){ 
    for(var i=0;i<loadFirst;i++){
    createImg();
    }    
}
function remove(id)
{
    $('.'+id).remove();
}
function createImg(){

    $.getJSON('json-data.php', function(data) {
        alert("Return json-data"+data.img);
        $('#showdata').html($('#showdata').html()+"<div id="+getImageName(data.img)+" ><img width=\"450px\" src=\""+data.img+"\"></div><br/>");
    });

}
function getImageName(src){
var path = src;
var tarr = path.split('/');      // ["static","images","banner","blue.jpg"]
var file = tarr[tarr.length-1]; // "blue.jpg"
var data = file.split('.')[0];  // "blue"
return data;

}
$(document).ready(function(){

    $(window).scroll(function(){
        // grab the scroll amount and the window height
        var scrollAmount = $(window).scrollTop();
        var documentHeight = $(document).height();

        // calculate the percentage the user has scrolled down the page
        var scrollPercent = (scrollAmount / documentHeight) * 100;

        if(scrollPercent > 80) {
                for(var i=0;i<bufferLoad;i++){
                createImg();
            }
        }
        if(totalLoad>maxLoaded){

        }
    });
});

</script>

</head>
<body>
<div id="showdata" style="width:450px;margin-left:auto;margin-right:auto;">
<script type="text/javascript">  
loadTop();
</script>  </div>
</body>
</html>

json-data.php コード: 

$files = glob("Approved/*.*");
$no = sizeof($files)-1;

$random = rand(0, $no);
$imgHold=$files[$random];

$imgPull = array('img' =>$imgHold);
echo json_encode($imgPull);

?>

どうもありがとうございました

4

0 に答える 0