Php 滚动加载更多图像（不带mysql）
我有一段php代码，可以自动将我的照片整理到图库：Php 滚动加载更多图像（不带mysql）,php,javascript,ajax,load,scroll,Php,Javascript,Ajax,Load,Scroll,我有一段php代码，可以自动将我的照片整理到图库： <?php $folder = "../albums/1000/"; $folder3 = "albums/1000/"; $handle = opendir($folder); $noeffect = "noeffect"; while (false !== ($file = readdir($handle))) { if (strpos($file, '.png',1)||strpos($file,
<?php
$folder = "../albums/1000/";
$folder3 = "albums/1000/";
$handle = opendir($folder);
$noeffect = "noeffect";
while (false !== ($file = readdir($handle))) {
if (strpos($file, '.png',1)||strpos($file, '.jpg',1)||strpos($file, '.JPG',1) ) {
$imgsrc= "../thumbnail.php?file=";
$imgend= "&width=120&height=120";
echo ("
<li><a href=\"".$folder.$file."\" rel=\"".$rel.external."\" class=\"".$noeffect."\">
<img src=\"".$imgsrc.$folder3.$file.$imgend."\" /></a></li> "); }}
?>
顺便说一句，它适用于iphone，因此我需要它快速加载。首先，使用javascript开始在DOM ready上预加载大图片。这将确保首先加载拇指。当拇指完成加载后，开始通过javascript加载“大图片”。这将导致浏览器缓存大图片并立即显示 其次，浏览器一次最多只能打开8个到任何域的连接。较旧的浏览器使用较少。这意味着有30张照片，需要4“轮”的装载才能得到所有东西。这不包括html、css和javascript文件。无法一次加载30张图片。如果您可以设置子域并指定要从每个子域加载的图像，则图像将以用户连接能够处理的速度加载。或者您的服务器可以提供服务。您确实希望确保始终从同一子域加载每个图像，以便浏览器在页面加载之间对其进行缓存
举个例子，你可以看到我管理的网站（无耻插件）bigstockphoto.com上一整页的拇指加载速度有多快。页面加载完成后，javascript/ajax开始加载较大的“悬停”图像。如果将每页图像数设置为160，则每页加载的图像数超过320个（160个拇指+160个大图像）。您可以使用图像库将所有缩略图合并为一个大图像，然后使用CSS定位将每个缩略图显示在其各自的div中 这样，浏览器仅加载一个图像。所有缩略图同时显示，但是如果您有数百个图像，您可能希望将它们分成更小的组，这样精灵文件就不会太大
<?php
$images_dir = './images';
$thumb_height = $thumb_width = $sprite_width = 120;
// List the images to process
$sprite_exists = false;
$list = array();
if ($handle = opendir($images_dir)) {
while (false !== ($filename = readdir($handle))) {
if ($filename == "sprite.jpg") { $sprite_exists = true; break;}
$fpath = $images_dir.'/'.$filename;
if (exif_imagetype($fpath) == IMAGETYPE_GIF) { $list[] = $fpath; }
else if (exif_imagetype($fpath) == IMAGETYPE_JPEG) { $list[] = $fpath; }
else if (exif_imagetype($fpath) == IMAGETYPE_PNG) { $list[] = $fpath; }
}
closedir($handle);
}
// Create a sprite image of all thumbnails
if ( ! $sprite_exists) {
$sprite_height = $thumb_height * (count($list));
// create the large sprite
$sprite = imagecreatetruecolor($sprite_width, $sprite_height);
// Set the background
$black = imagecolorallocate($sprite, 0, 0, 0);
imagefill($sprite, 0, 0, $black);
$i = 0;
foreach($list as $fpath){
list($width_orig, $height_orig) = getimagesize($fpath);
if (exif_imagetype($fpath) == IMAGETYPE_GIF) { $source = imagecreatefromgif ($fpath); }
else if (exif_imagetype($fpath) == IMAGETYPE_JPEG) { $source = imagecreatefromjpeg($fpath); }
else if (exif_imagetype($fpath) == IMAGETYPE_PNG) { $source = imagecreatefrompng ($fpath); }
$horizontal_position = 0;
$vertical_position = $thumb_height * $i;
$ratio_orig = $width_orig/$height_orig;
if ($ratio_orig > 1) {
// Landscape
$new_width = $thumb_width;
$new_height = intval($thumb_height / $ratio_orig);
$vert_offset = intval(($thumb_height - $new_height)/2);
$vertical_position += $vert_offset;
} else if ($ratio_orig < 1) {
// Portrait
$new_width = intval($thumb_width * $ratio_orig);
$new_height = $thumb_height;
$horiz_offset = intval(($thumb_width - $new_width)/2);
$horizontal_position += $horiz_offset;
} else {
// Square
$new_width = $thumb_width;
$new_height = $thumb_height;
}
imagecopyresampled($sprite, $source, $horizontal_position, $vertical_position, 0, 0, $new_width, $new_height, $width_orig, $height_orig);
$i++;
}
// Output and free from memory
//imagejpeg($sprite, './images/sprite.jpg');
imagejpeg($sprite, './sprite.jpg');
imagedestroy($sprite);
}
// Generate the HTML to display thumbs from the sprite
$html = '<html><head><style type="text/css">.thumb{border:1px solid silver;height:'.$thumb_height.'px;width:'.$thumb_width.'px;
background-image:url(sprite.jpg);background-position: 0 -20px;display:inline-block;}</style></head><body>';
$i = 0;
foreach($list as $fpath){
$vertical_offset = $thumb_height * $i;
$thumb = '<a href="'.$fpath.'" class="thumb" style="background-position: 0 -'.$vertical_offset.'px"> </a>';
$html .= $thumb;
$i++;
}
$html .= '</body></html>';
file_put_contents('thumbs.html',$html)
?>