Javascript php中的图像库：暂停读取文件数组，继续单击
我需要建立一个图像库，其中：Javascript php中的图像库：暂停读取文件数组，继续单击,javascript,php,jquery,lazy-loading,auto-generate,Javascript,Php,Jquery,Lazy Loading,Auto Generate,我需要建立一个图像库，其中： 显示从大图像目录自动生成的缩略图（完成） 没有浏览器默认滚动条（替换为完美滚动条），（完成。） 在等宽缩略图的列中具有图像（完成） 首先在大目录中显示新图像（完成） 延迟加载缩略图。（问题！） 在智能手机上有平滑的滚动（因为5而无法达到） 一个潜在的无休止的缩略图块显示（链接到另一个页面的大图像）或有人想向下滚动。图库将至少有1000-2000个缩略图链接 我知道一次加载这么多缩略图可能会使浏览器崩溃，这就是为什么我试图让图像延迟加载的原因，但就我而言，我无法让任何
<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>
jQuery（文档）.ready（函数（$）{
“严格使用”；
$（“#默认值”）.perfectScrollbar（{wheelSpeed:50，wheelPropagation:true，minScrollbarLength:20}）；
});
.contentHolder{位置：相对；边距：0px自动；填充：0px；宽度：100%；高度：100%；溢出：隐藏；}
.contentHolder.content{}
.spacer{text align:center}
html，正文{
边际：0px；
填充：0px；
背景色：黑色；
-webkit背景尺寸：封面；
-moz背景尺寸：封面；
-o-背景尺寸：封面；
背景尺寸：封面；
}
.imagecontainer{宽度：100%；}
#视频{宽度：100%；高度：120px；}
#照片{
线高：0；
-webkit列数：5；
-webkit柱间隙：0px；
-moz列数：5；
-moz柱间距：0px；
列数：5；
柱间距：0px；
浮动：左；
}
#照片img{
/*以防有内联属性*/
宽度：99%！重要；
高度：自动！重要；
不透明度：0.8；
过滤器：α（不透明度=80）；
-webkit转换：所有500毫秒易用性；
-moz转换：所有500毫秒的易用性；
-o型过渡：所有500毫秒的缓解；
-毫秒转换：所有500毫秒的转换都很容易；
过渡：所有500ms缓解；
-webkit背面可见性：隐藏；
}
#图片img:hover{
宽度：100%！重要；
不透明度：1；
过滤器：alpha（不透明度=100）；/*适用于IE8及更早版本*/
}
简单菜单栏当前为空。
您的方法是错误的，要实现这一点，请使用XHR（ajax）将适当的参数从javascript发送到php，以便它在您想要的特定范围内循环。这是大量代码。你能把它归结为10或20行需要改变吗？完成。请向下滚动至“编辑”，向上阅读。谢谢：）
$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>';
}