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

画像が読み込まれた後。

このように 1 つの画像が読み込まれるチュートリアルしか見たことがありません....一連の画像を順番に読み込んで追加するためのテクニックはありますか?

前もって感謝します

4

3 に答える 3

2

「ロード」が何を意味するのかわかりませんが、単にimg要素を親divに追加するだけで、ブラウザは「ねえ、 の画像がありsrcます。それをつかみに行きましょう」と言います。

ここに JSFiddle の実際の例があります

于 2012-08-16T03:56:20.703 に答える
1

私が正しく理解している場合は、追加するすべての画像が適切に読み込まれるまで、div を読み込み中としてラベル付けする必要があります。これは実行可能ですが、少し複雑です。

画像 URL の順序付きリストを生成できると仮定しています。そうでない場合は、さらに面倒な作業が必要です。

基本的にやりたいことは、各画像がロードされているかどうかをチェックすることです。それらがすべてロードされたら、done ハンドラーを呼び出すことができ、ロード.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 に答える