您好我在使用 php 和 jQuery 创建动态图库时遇到问题。简而言之，我有一百张我想以漂亮的形式显示的照片（对于摄影师的网站）。图片已经过优化，因此整个画廊的重量约为 10mb。
我正在使用galleryView 插件。php 用于从图像文件夹中获取所有文件名并创建 s 的无序列表。GalleryView 然后获取列表并创建一个整洁的画廊。
我遇到的问题是您必须等待画廊显示，直到所有图片都下载完毕。10mbs，需要很长时间。
仅下载几个文件后，是否有运行图库的简单选项？
或者有人可能知道更好的方法吗？一些可以处理许多图像的不错的 jQuery 画廊插件？我一直很不成功地寻找一个。
提前致谢
@Peterajtai
不，你是对的，我没有看到。对我来说最好的方法是从一些图像开始：（下面是来自galleryview的默认实现示例）：
<div id="photos" class="galleryview">
<div class="panel">
<img src="img/gallery/01.jpg" />
<div class="panel-overlay">
<h2>Effet du soleil sur le paysage</h2>
<p>Photo by <a href="http://www.sxc.hu/profile/tomharry" target="_blank">tomharry</a>. View full-size photo <a href="http://www.sxc.hu/photo/158829" target="_blank">here</a>.</p>
</div>
</div>
<div class="panel">
<img src="img/gallery/02.jpg" />
<div class="panel-overlay">
<h2>Eden</h2>
<p>Photo by <a href="http://www.sxc.hu/profile/emsago" target="_blank">emsago</a>. View full-size photo <a href="http://www.sxc.hu/photo/152865" target="_blank">here</a>.</p>
</div>
</div>
<div class="panel">
<img src="img/gallery/03.jpg" />
<div class="panel-overlay">
<h2>Snail on the Corn</h2>
<p>Photo by <a href="http://www.sxc.hu/profile/baines" target="_blank">baines</a>. View full-size photo <a href="http://www.sxc.hu/photo/34453" target="_blank">here</a>.</p>
</div>
</div>
<div class="panel">
<img src="img/gallery/04.jpg" />
<div class="panel-overlay">
<h2>Flowers</h2>
<p>Photo by <a href="http://www.sxc.hu/profile/jazza" target="_blank">jazza</a>. View full-size photo <a href="http://www.sxc.hu/photo/990169" target="_blank">here</a>.</p>
</div>
</div>
<div class="panel">
<img src="img/gallery/06.jpg" />
<div class="panel-overlay">
<h2>Alone Beach 2B</h2>
<p>Photo by <a href="http://www.sxc.hu/profile/sgursozlu" target="_blank">sgursozlu</a>. View full-size photo <a href="http://www.sxc.hu/photo/738279" target="_blank">here</a>.</p>
</div>
</div>
<div class="panel">
<img src="img/gallery/05.jpg" />
<div class="panel-overlay">
<h2>Sunrise Trees</h2>
<p>Photo by <a href="http://www.sxc.hu/profile/a_glitch" target="_blank">a_glitch</a>. View full-size photo <a href="http://www.sxc.hu/photo/289581" target="_blank">here</a>.</p>
</div>
</div>
<div class="panel">
<img src="img/gallery/07.jpg" />
<div class="panel-overlay">
<h2>Waterfall</h2>
<p>Photo by <a href="http://www.sxc.hu/profile/thesaint" target="_blank">thesaint</a>. View full-size photo <a href="http://www.sxc.hu/photo/174331" target="_blank">here</a>.</p>
</div>
</div>
<div class="panel">
<img src="img/gallery/08.jpg" />
<div class="panel-overlay">
<h2>Death Valley</h2>
<p>Photo by <a href="http://www.sxc.hu/profile/djkmart" target="_blank">djkmart</a>. View full-size photo <a href="http://www.sxc.hu/photo/270109" target="_blank">here</a>.</p>
</div>
</div>
<ul class="filmstrip">
<li><img src="img/gallery/frame-01.jpg" alt="Effet du soleil" title="Effet du soleil" /></li>
<li><img src="img/gallery/frame-02.jpg" alt="Eden" title="Eden" /></li>
<li><img src="img/gallery/frame-03.jpg" alt="Snail on the Corn" title="Snail on the Corn" /></li>
<li><img src="img/gallery/frame-04.jpg" alt="Flowers" title="Flowers" /></li>
<li><img src="img/gallery/frame-06.jpg" alt="Alone Beach" title="Alone Beach" /></li>
<li><img src="img/gallery/frame-05.jpg" alt="Sunrise Trees" title="Sunrise Trees" /></li>
<li><img src="img/gallery/frame-07.jpg" alt="Waterfall" title="Waterfall" /></li>
<li><img src="img/gallery/frame-08.jpg" alt="Death Valley" title="Death Valley" /></li>
</ul>
</div>
然后像这样运行ajax：
$.ajax({
url: 'getImgSrcs.php', //this will access the server and return srcs for remaining images, let's say pipe delimited for example
data: {'getimages': 'true'}, // this could easily be {getimages: 'block 1'}
type: 'post',
success function(data) {
imgarray = data.split("|"); // split into array giving thumbsrc:fullsrc:title;
$.each(imgarray, function(index) {
var thumbsrc = data[index].split(":")[0];
var fullsrc = data[index].split(":")[1];
var title = data[index].split(":")[2];
$('<div class="panel"></div>')
.append('<img src="' + thumbsrc + '" />')
.append('<div class="panel-overlay"></div>')
.append('<h2>' + title + '</h2>');
.append('<p>View full-size photo <a href="' + fullsrc + '" target="_blank">here</a>.</p>')
.appendTo('#photos');
})
}
})
您可以使用相同的功能来构建列表项和 appendTo('ul.filmstrip');
就个人而言，我会在 php 端使用 for 循环构建图像块，并将它们准备好插入
success: function(data) {
$("#photos").append(data);
}
或者，您可以构建一个 xml 提要或 json 对象并实现它。您的个人选择。
在galleryView中似乎没有任何对预加载图像的原生支持。从规格：
我会在未来的版本中研究预加载图像
所以你必须自己动手。
看一下 jQuery.load()函数。
加载后显示第一张图像，然后在后台加载其他图像。
假设第一张图片在id=first
$(function() { // <== doc ready
// do something after first image is loaded
$("#first").load( /* show the first image */ );
// do something after all images loaded
$("img").load( /* do the main gallery loop */ )
});
根据需要修改上述内容。假设您要显示第一个大图像和前 5 个缩略图等。
这就是我要开始的方式。我认为如果您不仅预加载第一张图像，而且预加载尽可能多的图像来填满第一行拇指，它可能看起来会更流畅。
div在加载所有图像之前，仅显示一个临时图像：
<div id="temp"></div>
<div id="photos" class="galleryview">
<img id="first" ... />
<img ... />
<img ... />
<img ... />
...
</div>
$(function() { // <== doc ready
var $photos = $("#photos"), $temp = $("#temp"),
$first = $("#first");
// Hide gallery:
$photos.hide();
// show temp when 1st img loaded
$first.load( $temp.append( $first.clone() ) );
// To make things look smooth you can also make
// a quick gallery view out of temp. This only has 1 image.
$temp.galleryView({
panel_width: 800,
panel_height: 300,
frame_width: 100,
frame_height: 100,
});
// do full gallery when all imgs loaded
$("img").load(
// remove the temp gallery
$temp.remove();
// show gallery
$photos.galleryView({
panel_width: 800,
panel_height: 300,
frame_width: 100,
frame_height: 100,
});
);
});
JQuery Cycle 插件是一个超可定制的选项，请查看@http://jquery.malsup.com/cycle/
他们甚至有一个预加载示例@ http://jquery.malsup.com/cycle/add3.html