Вы можете использовать библиотеку изображений, чтобы объединить все миниатюры в одно большое изображение, а затем использовать позиционирование CSS, чтобы отобразить каждый из них в отдельном элементе.
Таким образом, браузер загружает только одно изображение.Все миниатюры появляются одновременно, но если у вас есть сотни изображений, вы можете разбить их на более мелкие группы, чтобы спрайт не был слишком большим файлом.
<?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)
?>