Question

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

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

载入图像后。

我只看过加载一个图像的教程，如this .... 是否有任何技术可以按顺序加载和附加一堆图像？

提前致谢

Answer 1

不确定“加载”是什么意思，但您只需将img元素附加到父div，浏览器就会说：“嘿，有一张图片带有{{ 1}}，让我抓住它。“

<强> Here a working example on JSFiddle

Answer 2

如果我理解正确，您希望将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();
}

Answer 3

不知道这是否是您在问题中寻找的具体内容，但此插件会在加载一组图像时通知您，并允许在每个图像加载后执行回调功能，或者整套：

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

效果很好。

使用jquery加载一系列图像

3 个答案: