在滚动上加载更多图像（无MySQL）

发布于 2024-12-05 07:06:35 字数 926 浏览 2 评论 0原文

我有此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/专辑/996.php

顺便说一句，这就是为什么我需要快速加载的原因

原文

i have this php code who auto thumb and arrange my photos to gallery:

<?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> "); }}
?>

it works great and i love it! but when i upload 200-300 pictures it need to load the thumbs before it could view the big picture in the gallery.. and i thought how can i make load more button or load more on scroll to load like 30 pictures a time..
i search the net and tried many but most of them use mysql and i dont know how to deal it and others were problematic.. any solution? thanks!

You can take a look here for example for what im doing : http://m.eladhamemagnet.net/albums/996.php

btw its for iphone so thats why i need it to load fast

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

梦毁影碎の 2024-12-12 07:06:35

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

其次，浏览器一次只能一次与任何域开放8个连接。较旧的浏览器使用少。这意味着有30张图片，将需要4个“回合”负载才能获得所有内容。这不包括HTML，CSS和JavaScript文件。没有办法一次加载30张图片。如果您可以设置子域并分配图像从每个子域中加载，则您的图像将与用户连接所能处理的快速加载。否则您的服务器可以服务。您确实需要确保每个图像始终从同一子域中加载，以便浏览器将其在页面加载之间缓存。

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

回复收藏 0 原文

记忆消瘦 2024-12-12 07:06:35

您可以使用图像库将所有缩略图合并为一张大图像，然后使用 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)
?>

You can use the image library to merge all the thumbnails into a big single image, then use CSS positioning to display each one in its own div.

This way, the browser loads one image only. All the thumbnails appear at the same time, but if you have hundreds of images, you might want to break them into smaller groups so the sprite is not too big a file.

    <?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)
?>

回复收藏 0 原文