1

我正在使用这个库，我想做的是将整个系列的图像动态加载到一个元素中：

<div id="product" style="width: 640px; height: 300px; overflow: hidden;">
    /* These images are loaded and appended to the div element dynamically
        <img src="images/01.jpg" alt="" />
        <img src="images/02.jpg" alt="" />
        <img src="images/03.jpg" alt="" />
        <img src="images/04.jpg" alt="" />
        <img src="images/05.jpg" alt="" />
        <img src="images/06.jpg" alt="" />
    /*
</div>

然后调用j360库进行设置：

jQuery(document).ready(function() {
    jQuery('#product').j360();
});

加载图像后。

我只看过这样加载一个图像的教程....有没有按顺序加载和附加一堆图像的技术？

提前致谢

4

3 回答 3

2

不知道你所说的“加载”是什么意思，但你可以简单地将img元素附加到父元素div，浏览器会说，“嘿，有一个带有 的图像src，让我去拿它。”

这是一个关于 JSFiddle 的工作示例

于 2012-08-16T03:56:20.703 回答
1

如果我理解正确，您希望将 div 标记为正在加载，直到所有要附加的图像都已正确加载。这是可行的，但有点复杂。

我假设您能够生成图像 URL 的有序列表。如果不是这种情况，那么您还有一些繁重的工作要做。

本质上，我们想要做的是检查每个图像是否已加载。一旦它们全部加载完毕，我们可以调用一个完成处理程序，您可以.gif用您的产品视图替换加载。我们开始做吧。

HTML 

<div id="product" style="width: 640px; height: 300px; overflow: hidden;"></div>

JavaScript

$(document).ready(function() {
  var imageURLs = [ ... ]; // you need to generate this (not too hard)
  var imagesLoaded = 0;
  var images = [ ];

  $.each(imageURLs, function(i, imageURL) {
    var $img = $('<img/>').load(function() {
      imagesLoaded++;
      // See if this was the last image we need to load.
      if (imagesLoaded == imageURLs.length) {
        showProductView();
      }
    })
    .attr('src', imageURL);
    images.push($img);
  });
});

var showProductView = function() {
  var $product = $('#product');
  $.each(images, function(i, $img) {
    $product.append($img);
  });
  $product.removeClass('loading');
  $product.j360();
}
于 2012-08-16T06:34:42.237 回答
0

不知道这是否是您在问题中特别要寻找的内容，但是此插件会在加载一组图像时通知您，并允许在加载每个单独的图像或整个图像集后执行回调函数：

http://www.farinspace.com/jquery-image-preload-plugin/

它工作得很好。

于 2012-08-16T06:32:03.330 回答