Question

请帮助解决以下问题：
有一个页面加载图像。
50张图片如何制作，图像会逐渐显示（例如谷歌照片）？

$(document).ready(function(){
        $.ajax({
            type: 'POST',
            url: document.location.href,
            dataType: 'html',
            data: {'ajax-query': 'true'}
            success: function(data){
                $('#divgallery').append(data);
            }
        });
    })

服务器代码

    if($i=0; $i<50;$i++){   echo '<img src="/img/' . $img . '">';   }

在服务器端代码完成后，它们会一次显示出来如何在每次迭代中显示图像？
任何提示，链接或代码示例都很有用。

Answer 1

首先，在服务器站点上返回图像链接，使其可以单独检索。我推荐JSON fromat。

$res = array();
if($i=0; $i<50;$i++){  $res[] = '<img src="/img/' . $img . '">';   }
echo json_encode($res);

其次，在获得数据后，您必须逐个添加图像，但在添加之间会有延迟。

       success: function(data){
            delayAppend($("#divgallery"), data, 0);
        }

delayAppend函数类似于：

function delayAppend($div, data, index){
   if(index >= data.length)
      return;

   $div.append(data[index]);
   setTimeout(function(){ delayAppend($div, data, index+1); }, 500);
}

以下是delayAppend功能的演示：http://jsfiddle.net/s7Q8W/

注意：代码未经过全面测试。

如何在每次迭代中显示图像（ajax）

1 个答案: