Question

我有这个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, '.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> "); }}
?>

它很棒，我喜欢它！但是当我上传200-300张图片时，它需要加载拇指才能查看图库中的大图..我想我怎样才能在滚动上加载更多按钮或加载更多，一次加载30张图片.. 我搜索网并尝试了很多，但大多数使用mysql，我不知道如何处理它，其他人有问题..任何解决方案？谢谢！

您可以在此处查看我正在做的事情：http://m.eladhamemagnet.net/albums/996.php

btw for iphone，这就是为什么我需要它来快速加载

Answer 1

首先，使用javascript开始在DOM上预先加载大图片。这将确保首先加载拇指。当拇指完成加载，然后开始通过javascript加载“大图片”。这将导致大型图片被浏览器缓存并立即显示。

其次，浏览器一次最多只能打开8个连接到任何域。较旧的浏览器使用较少。这意味着有30张图片，需要4“轮”的负载才能获得所有东西。这不包括html，css和javascript文件。一次无法加载30张图片。如果您可以设置子域并分配图像以从每个子域加载，则您的图像将以用户连接可以处理的速度加载。或者您的服务器可以服务。您确实希望确保每个图像始终从同一个子域加载，以便浏览器在页面加载之间缓存它。

作为一个例子，你可以看到我管理的网站（无耻的插件）bigstockphoto.com上整页拇指的加载速度有多快。页面加载完成后，javascript / ajax开始加载较大的“悬停”图像。如果将每页图像数设置为160，则每页加载超过320张图像（160张大拇指+ 160张大图像）。

Answer 2

您可以使用图像库将所有缩略图合并为一个大的单个图像，然后使用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">&nbsp;</a>';
    $html .= $thumb;
    $i++;
}
$html .= '</body></html>';
file_put_contents('thumbs.html',$html)
?>

Answer 3

我为每张照片预先加载了它并且它有效..

在滚动上加载更多图像（没有mysql）

3 个答案: