Warning: file_get_contents(/data/phpspider/zhask/data//catemap/1/php/273.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 不知道应该从哪里开始分页{$.getJSON,php image array}_Javascript_Php_Ajax_Pagination - Fatal编程技术网

Javascript 不知道应该从哪里开始分页{$.getJSON,php image array}

Javascript 不知道应该从哪里开始分页{$.getJSON,php image array},javascript,php,ajax,pagination,Javascript,Php,Ajax,Pagination,下面是我的代码现在的设置方式: 用户访问页面上的某个链接 $.getJSON向php脚本发送请求 php调用scandir()为图像名称创建一个数组(最终为100s-1000s,但现在只有少数用于测试,因此需要添加分页) 回显json_编码的数组 $。每个项用于创建作为新标记的字符串变量 将字符串变量前置到作为图像内联显示的div容器 以下是我想做的: 一次使用ajax加载50个项目 了解如何使用$。每个,以便它能够满足50项要求 找出另一种使用$.getJSON的方法,这样就不会同时请求

下面是我的代码现在的设置方式:

  • 用户访问页面上的某个链接

  • $.getJSON
    向php脚本发送请求

  • php调用
    scandir()
    为图像名称创建一个数组(最终为100s-1000s,但现在只有少数用于测试,因此需要添加分页)

  • 回显json_编码的数组

  • $。每个
    项用于创建作为新标记的字符串变量

  • 将字符串变量前置到作为图像内联显示的div容器

以下是我想做的:

  • 一次使用ajax加载50个项目

  • 了解如何使用
    $。每个
    ,以便它能够满足50项要求

  • 找出另一种使用
    $.getJSON
    的方法,这样就不会同时请求所有xxxx个图像

我的问题是:

  • 如何使在javascript事件顶部仅发出一次的请求在用户单击这些页面的整个过程中保持活动状态
Php从scandir创建数组似乎不是一个问题……可能一次返回整个数组是一个问题,但我不知道如何创建一个循环,等待用户请求(单击“下一步”或“上一步”)迭代到数组中的下50个图像

我想最好的工作地点应该是
$之前或内部。每个
都使用一个循环来等待下面的ajax请求,以创建接下来的50个标记并将它们预先发送到

代码如下:

     requestServer('ajax.php', flag);
            $('#Container').fadeIn('slow');
            $('.close_button').click(function() {
                $('#Container').fadeOut('slow');
                $('#welcome').fadeTo('slow',1);
                $('#i1,#i3,#i5').click(clickFade).mouseover(mouseOverFunc);
                $('#welcome').css({'position':'absolute','z-index':'10'});
            });
            flag = false;
            break;

    function requestServer(file, run_flag) {
        if (run_flag === true) {
            $.getJSON(file, function(data) {
                $.each(data, function(key, val) {
                    var html = "<img src='../images/"+val+"' style='display:inline' alt=null />";
                    $('#Container').prepend(html);
                });
            });
        }
    }
requestServer('ajax.php',标志);
$('容器').fadeIn('慢');
$('.close_按钮')。单击(函数(){
$(“#容器”).fadeOut('slow');
$('welcome').fadeTo('slow',1);
$('#i1,#i3,#i5')。单击(单击淡入淡出)。鼠标悬停(鼠标悬停功能);
$('welcome').css({'position':'absolute','z-index':'10');
});
flag=false;
打破
函数请求服务器(文件,运行标志){
if(run_标志===true){
$.getJSON(文件、函数(数据){
$。每个(数据、函数(键、值){
var html=“”;
$(“#容器”).prepend(html);
});
});
}
}


在每次请求时扫描图像目录似乎是浪费

就我个人而言,我会编写一个PHP脚本,每X分钟扫描一次目录(或者在图像上传时调用)。将其编码为JSON,并将输出保存为服务器上某个位置的
.JSON
文件

在客户端,
$。获取该JSON文件。创建50个图像元素,并将它们的
.src
设置为从
JSON
文件检索到的URL。在页面底部有一个前进/后退按钮,可以将这50个图像元素
.src
重新设置为下一个/上一个设置

或者,您还可以在
DOM
之外创建
img
元素,然后设置
间隔
以每Z毫秒更改该元素的
.src
。浏览器将下载图像,即使它们没有附加到
DOM
,加载的图像将被缓存

祝你好运:)

<?php
    $images = scandir('../includes/scrapedImages/');
    foreach ($images as $key => $image) {
        if ($image == '.' || $image == '..') {
            unset($images[$key]);
        }
    }
    echo json_encode($images);
?>