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

【问题标题】：Load more images on scroll (without mysql)在滚动上加载更多图像（没有 mysql）
【发布时间】：2011-09-18 03:06:41
【问题描述】：

我有这个 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

顺便说一句，它适用于 iphone，所以我需要它快速加载

【问题讨论】：

标签： php javascript ajax load scroll

【解决方案1】：

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

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

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

【讨论】：

【解决方案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)
?>

【讨论】：

当我尝试这段代码时，它什么也没有输出，一个空白页。我喜欢这个想法，但我想看看它是如何工作的。谢谢！

【解决方案3】：

我为每张图片都做了预加载，效果很好..

【讨论】：