加載更多圖片（沒有MySQL的）

我有這個PHP代碼誰汽車拇指和安排我的照片庫：加載更多圖片（沒有MySQL的）

<?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，我不知道如何處理它和其他人有問題..任何解決方案？謝謝！

你可以看看這裏例如用於什麼IM做：http://m.eladhamemagnet.net/albums/996.php

BTW其iphone所以這就是爲什麼我需要它加載快

來源

2011-09-18 Elad

我做了預加載的每一張照片，它的工作..

來源

2011-09-20 03:14:30 Elad

首先，使用JavaScript來啓動預先裝載大在DOM準備好的圖片。這將確保拇指首先加載。當大拇指完成加載後，然後開始通過javascript加載「大圖片」。這將導致大圖片被瀏覽器緩存並立即顯示。

其次，瀏覽器一次最多隻能打開8個連接到任何域。較舊的瀏覽器使用較少。這意味着有30張照片，它將需要4輪「負載」來獲得一切。這不包括html，css和javascript文件。一次無法加載30張照片。如果您可以設置子域並分配圖像以從每個子域加載，則圖像的加載速度將與用戶連接可以處理的速度一樣快。或者你的服務器可以服務。您確實希望確保每個圖像始終從相同的子域加載，以便瀏覽器在頁面加載之間進行緩存。

作爲一個例子，你可以看到整個頁面的大拇指在我管理的網站（無恥插件）bigstockphoto.com上加載的速度有多快。一旦頁面完成加載，javascript/ajax開始加載較大的「懸停」圖像。如果將每頁圖像設置爲160，則每頁加載超過320張圖像（160個大拇指+ 160個大圖像）。

來源

2011-09-18 03:42:25

你有這個或插件的任何教程？謝謝！ – Elad

您可以使用圖像庫將所有縮略圖合併成一個大的單個圖像，然後使用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) 
?>

來源

2011-09-18 06:41:30 David

當我嘗試這個代碼時，它什麼也沒有發出，一個空白頁。我喜歡這個主意，但我想看看它是如何工作的。謝謝！ – Elad

加載更多圖片（沒有MySQL的）

回答

相關問題