在滾動上加載更多圖像（沒有mysql）
[英]Load more images on scroll (without mysql)
問題描述
我有這個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
順便提一下，這就是為什么我需要它來快速加載
3 個解決方案
解決方案1
1 2011-09-18 03:42:25
首先，使用javascript開始在DOM上預先加載大圖片。 這將確保首先加載拇指。 當拇指完成加載，然后開始通過javascript加載“大圖片”。 這將導致瀏覽器緩存大圖片並立即顯示。
其次，瀏覽器一次最多只能打開8個連接到任何域。 較舊的瀏覽器使用較少。 這意味着有30張圖片，需要4“輪”的負載才能獲得所有東西。 這不包括html，css和javascript文件。 一次無法加載30張圖片。 如果您可以設置子域並分配圖像以從每個子域加載，則您的圖像將以用戶連接可以處理的速度加載。 或者您的服務器可以服務。 您確實希望確保每個圖像始終從同一個子域加載，以便瀏覽器在頁面加載之間緩存它。
作為一個例子，你可以看到我管理的網站（無恥的插件）bigstockphoto.com加載整頁拇指的速度有多快。 頁面加載完成后，javascript / ajax開始加載較大的“懸停”圖像。 如果將每頁圖像數設置為160，則每頁加載超過320個圖像（160個大拇指+ 160個大圖像）。
解決方案2
1 2011-09-18 06:41:30
您可以使用圖像庫將所有縮略圖合並為一個大的單個圖像，然后使用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)
?>
解決方案3
0 已采納 2011-09-20 03:14:30
我為每張照片做了預裝，但它確實有用..
滾動或單擊按鈕時加載更多圖像（無mysql）
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.
相關問題
滾動或單擊按鈕時加載更多圖像（無mysql）
如何動態加載滾動圖像而不重復？
滾動以加載更多RecyclerView
點擊即可加載更多內容，而無需先加載所有圖片
滾動加載更多 SQL 限制
加載更多包含Blob圖片的項目
向下滾動以加載更多搜索數據
Laravel使用Jquery和AJAX在滾動中加載更多數據
向下滾動以加載更多表行
AJAX 在滾動到底部時加載更多<div></div><div id="text_translate"><p>我想使用 AJAX 和 PHP ZC1C425268E68385D14AB5074C17A 從 mysql 加載數據。 例子： </p><p></p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"><div class="snippet-code"><pre class="snippet-code-css lang-css prettyprint-override"> #ajaxload { border: 1px solid #000; max-height: 400px; overflow-y:scroll; }</pre><pre class="snippet-code-html lang-html prettyprint-override"> <?php //data from mysql... ?> <div id="ajaxload"> <ul> <li>data...</li> <li>data...</li> <li>data...</li> <li>data...</li> <li>data...</li> <li>data...</li> <li>data...</li> <li>data...</li> <li>data...</li> <li>data...</li> <li>data...</li> <li>data...</li> <li>data...</li> <li>data...</li> <li>data...</li> <li>data...</li> <li>data...</li> <li>data...</li> <li>data...</li> <li>data...</li> <li>data...</li> <li>data...</li> <li>data...</li> <li>data...</li> <li>data...</li> <li>Loading next data...</li> </ul> </div></pre></div></div><p></p><p> 但是我在這里（在stackoverflow上）沒有找到具體的例子......一切都只是全頁滾動，但我只想滾動<div>以加載更多數據。 你能幫助我嗎？</p></div>
相關標簽