php中的图片库:暂停读取文件数组，继续onclick
Image gallery in php: Pause reading of array of files, continue onclick
我需要建立一个图像库，它：
- 显示从大图像目录自动生成的缩略图，（完成。）
- 没有浏览器默认滚动条（被完美滚动条取代），（完成。）
- 具有等宽缩略图中的列中的图像，（已完成。）
- 首先在大目录中显示新图像，（完成。）
- 缩略图的延迟加载。（问题！）
- 具有像智能手机上一样的平滑滚动功能（因为5而无法达到）
缩略图块（大图像的另一个页面链接）的潜在无休止显示，或者有人想向下滚动就可以显示。画廊将至少有1000-2000缩略图链接。
我知道一次加载这么多缩略图可能会导致浏览器崩溃，这就是为什么我试图让图像懒加载m，但就我而言，我无法让任何懒加载插件为我的网站工作。我从代码中删除了完美的scollbar后尝试了一下，但仍然没有雪茄。经过大量的搜索，我不得不得出一个结论，懒惰的负载"可能"并不总是有效的。
所以我想我必须将页面上加载的缩略图数量限制在30个以内。但同时，我想要一个链接，它将在同一页面上加载另外30个图像，而无需重新加载页面。。。
在添加懒惰加载图像插件之前，我正在按照原样生成下面的代码。
<head>
<link href="src/perfect-scrollbar.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="src/jquery.mousewheel.js"></script>
<script src="src/perfect-scrollbar.js"></script>
<script>
jQuery(document).ready(function ($) {
"use strict";
$('#Default').perfectScrollbar({ wheelSpeed: 50, wheelPropagation: true, minScrollbarLength: 20 });
});
</script>
</head>
<body>
<style>
.contentHolder { position:relative; margin:0px auto; padding:0px; width: 100%; height: 100%; overflow: hidden; }
.contentHolder .content {}
.spacer { text-align:center }
html, body {
margin: 0px;
padding: 0px;
background-color:black;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.imagecontainer { width:100%; }
#videos { width:100%; height:120px; }
#photos {
line-height: 0;
-webkit-column-count: 5;
-webkit-column-gap:0px;
-moz-column-count: 5;
-moz-column-gap:0px;
column-count:5;
column-gap:0px;
float:left;
}
#photos img {
/* Just in case there are inline attributes */
width: 99% !important;
height: auto !important;
opacity:0.8;
filter:alpha(opacity=80);
-webkit-transition: all 500ms ease;
-moz-transition: all 500ms ease;
-o-transition: all 500ms ease;
-ms-transition: all 500ms ease;
transition: all 500ms ease;
-webkit-backface-visibility: hidden;
}
#photos img:hover {
width: 100% !important;
opacity:1;
filter:alpha(opacity=100); /* For IE8 and earlier */
}
</style>
<div style="position:fixed; z-index:4; width:100%; background-color:rgba(100,100,100,0.5)">Simple Menu Bar-Currently empty.</div>
<div id="Default" class="contentHolder">
<div class="content">
<section id="photos">
<?php
/* Get Directory with Dates Last Modified */
function getimageswithdates(){
$directory="preload-images/";
$sortOrder="newestFirst";
$results = array();
$handler = opendir($directory);
while ($file = readdir($handler)) {
if ($file != '.' && $file != '..' && $file != "robots.txt" && $file != ".htaccess"){
$currentModified = filectime($directory."/".$file);
$file_names[] = $file;
$file_dates[] = $currentModified;
}
}
closedir($handler);
//Sort the date array by preferred order
if ($sortOrder == "newestFirst"){
arsort($file_dates);
} else {
asort($file_dates);
}
//Match file_names array to file_dates array
$file_names_Array = array_keys($file_dates);
foreach ($file_names_Array as $idx => $name) $name=$file_names[$name];
$file_dates = array_merge($file_dates);
//Loop through dates array, save list to array and echo the list
$filelist = array();
$i = 0;
foreach ($file_dates as $file_dates){
$date = $file_dates;
$j = $file_names_Array[$i];
$file = $file_names[$j];
$i++;
$filelist[] = $file;
echo '<a href="color.php?see='.str_ireplace(".jpg", " ", "$file"). '" class="photo-link smoothbox" rel="gallery">
<img src="preload-images-thumbs/'.$file.'" /></a>';
}
echo '</section> </div>';
}
/** settings **/
$images_dir = 'preload-images/';
$thumbs_dir = 'preload-images-thumbs/';
$thumbs_width = 200;
/* function: generates thumbnail */
function make_thumb($src,$dest,$desired_width) {
/* read the source image */
$source_image = imagecreatefromjpeg($src);
$width = imagesx($source_image);
$height = imagesy($source_image);
/* find the "desired height" of this thumbnail, relative to the desired width */
$desired_height = floor($height*($desired_width/$width));
/* create a new, "virtual" image */
$virtual_image = imagecreatetruecolor($desired_width,$desired_height);
/* copy source image at a resized size */
imagecopyresized($virtual_image,$source_image,0,0,0,0,$desired_width,$desired_height,$width,$height);
/* create the physical thumbnail image to its destination */
imagejpeg($virtual_image,$dest);
}
/** generate photo gallery **/
$image_files = get_files($images_dir);
if(count($image_files)) {
$index = 0;
foreach($image_files as $index=>$file) {
$index++;
$thumbnail_image = $thumbs_dir.$file;
if(!file_exists($thumbnail_image)) {
$extension = get_file_extension($thumbnail_image);
if($extension) { make_thumb($images_dir.$file,$thumbnail_image,$thumbs_width); }
}
}
}
else { }
/* function: returns files from dir */
function get_files($images_dir,$exts = array('jpg')) {
$files = array();
if($handle = opendir($images_dir)) {
while(false !== ($file = readdir($handle))) {
$extension = strtolower(get_file_extension($file));
if($extension && in_array($extension,$exts)) {
$files[] = $file; }
}
closedir($handle);
}
return $files;
}
/* function: returns a file's extension */
function get_file_extension($file_name) {
return substr(strrchr($file_name,'.'),1);
}
echo getimageswithdates();
?>
</body>
</html>
---------------------编辑------------------
foreach循环
$filelist = array();
$i = 0;
foreach ($file_dates as $file_dates){
$date = $file_dates;
$j = $file_names_Array[$i];
$file = $file_names[$j];
$i++;
$filelist[] = $file;
echo '<a href="color.php?see='.str_ireplace(".jpg", " ", "$file"). '" class="photo-link smoothbox" rel="gallery">
<img src="preload-images-thumbs/'.$file.'" /></a>';
}
如果i==30，循环是否可以暂停，然后点击继续，并在30秒内循环？
您的方法是错误的，执行XHR（ajax）来实现这一点，将适当的参数从javascript发送到php，使其在您想要的特定范围内循环。
相关文章：
- Javascript-如何读取json文件中的列并将其保存在Javascript数组中
- 正在尝试将JSON文件放入JS数组
- React.js如何从js文件中获取数组
- 将大数组(字符串和类型数组的混合物）存储到blob或文件中/从blob或文件检索大数组的最佳方式
- JavaScript代码，用于在浏览器中显示字节数组中的PDF文件(非base64编码）
- 如何从txt文件中获取要在javascript数组中使用的对象
- 数组在手动写入时有效，但从文本文件加载时无效
- 在将csv文件中的数据分配给数组变量时增强了d3代码
- 将javascript数组写入文件
- 从不一致的文件路径数组中获取键的值
- 如何将json文件中的数据提取到对象数组中，并在两个控制器之间共享
- 读取外部local.txt文件以将数据加载到数组中
- 将文本文件读入数组
- Grunt 可以直接从文件对象/数组或 glob 中的“src”值通过 HTTP 加载远程文件
- 将 FormData 对象放入数组中以从不同的输入文件上载文件
- 验证数组文件字段的表单提交
- 放在哪里;很多“;数据的数组/文件/其他地方，在node.JS上的JS中
- Html5文件读取器-读取本地Json数组文件并仅显示特定部分
- 未由使用 JavaScript 的 JSON 数组文件定义
- 使用JavaScript将JSON数组文件转换为图形
