Question

以下是我的代码现在的设置方式：

用户访问页面上的某个链接
$.getJSON向php脚本发送请求
php调用scandir()为图像名称创建一个数组（最终只有100s-1000s但现在只有少数用于测试，因此需要添加分页）
回应json_encoded数组
$.each item用于创建一个新标签的字符串变量
将字符串变量添加到div容器中，该容器是图像的内联显示

这是我正在尝试做的事情：

一次有50个项目加载ajax
弄清楚如何使用$.each以便它与50项要求一起使用
找出使用$.getJSON的另一种方式，以便不是一次性请求所有xxxx数量的图像

我的问题：

如何在用户点击这些页面的整个过程中，在javascript事件的顶部只发出一次请求？

从pandir创建数组的Php似乎不是一个问题...可能一次返回整个数组是一个问题，但我无法想象如何创建一个等待用户请求的循环（单击' next'或'prev'）迭代到数组中的下50个图像。

我想最好的工作地点是在$.each之前或之内，不知何故使用循环来等待下面的ajax请求来创建接下来的50个标签并将它们添加到。{/ p>

以下是代码：

     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);
                });
            });
        }
    }

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

Answer 1

在每个请求上扫描图像目录似乎很浪费。

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

在客户端，$.get表示JSON文件。创建50个图像元素，并将其.src设置为您从JSON文件中检索到的URL。在页面底部有一个前进/后退按钮，只需将这50个图像元素.src重新设置为下一个/上一个设置。

或者，您也可以在img之外创建DOM元素，然后设置interval以每Z毫秒更改该元素.src 。即使图像未附加到DOM，浏览器也会下载图像，并且这些图像将被缓存。

祝你好运：）

关于我应该从分页开始的地方感到困惑{$ .getJSON，php image array}

1 个答案: