加载图片之前运行 jQuery

Question

你好 我在使用 php 和 jQuery 创建动态画廊时遇到问题。 简而言之，我有一百张想要以漂亮的形式显示的照片（用于摄影师的网站）。图片已经过优化，所以整个图库的重量约为10mb。

我正在使用 galleryView 插件。 php 用于从图像文件夹中获取所有文件名并创建 s.php 的无序列表。 GalleryView 然后获取列表并创建一个简洁的图库。

我遇到的问题是你必须等待图库显示，直到所有图片下载完毕。 10mbs，需要很长时间。

是否有一个简单的选项可以在仅下载几个文件后运行图库？

或者有人知道更好的方法吗？一些不错的 jQuery 画廊插件可以处理很多图像？我一直在寻找一个非常不成功的人。

提前致谢

Answer 1

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 ，直到加载所有图像：

HTML:

<div id="temp"></div>
<div id="photos" class="galleryview">
    <img id="first" ... />
    <img ... />
    <img ... />
    <img ... />
    ...
</div>

JS:

$(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,
        });
    );
});

Answer 2

JQuery Cycle 插件是一个超级可定制的选项，请查看@ http://jquery.malsup.com/cycle/

他们甚至有一个预加载示例 @ http://jquery.malsup.com/cycle/ add3.html

Answer 3

@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 feed 或 json 对象并将其通过。您的个人选择。