2

isotope jQuery プラグインを一種のギャラリー フィルターとして使用しています。

300px x 200px または 200px x 300px の写真が 80 枚あります。問題は、ギャラリー タブをクリックしたときに画像を保持するアイソトープ コンテナーが、読み込み中に重なって表示されることです。ページの読み込みが停止する前にすべての画像を読み込めない場合があります。ここで構築している私のサイトを見ることができます。画像のプリロードについて読んでいたところ、こちらのスタック オーバーフローに関する質問を読んでいました。

私のhtmlは次のようになります

<div id="image_container">
  <div id="container">
    <img class="box wed cake" src="/images/gallery/wed2.png" />
    <img class="box wed cake" src="/images/gallery/wed1.png" />
    <img class="box wed cake" src="/images/gallery/wed13.png" />
    ...
  </div>
</div>

これをページの同位体ファイルに入れました

$(document).ready(function(){
var $container = $('#container');
$container.isotope({
  filter: '',
   animationOptions: {
   duration: 750,
   easing: 'linear',
   queue: false,
   }
 });

$('#filter a').click(function(){
  var selector = $(this).attr('data-filter');
  $container.isotope({ 
  filter: selector,
  animationOptions: {
  duration: 750,
  easing: 'linear',
  queue: false,
  }
 });
return false;
});

$('.box').preloader({
  loader: '/images/loading.gif',
  fadeIn: 700,
  delay : 200 
});
});

containerdiv全体で画像を事前にロードして、スピナーをに浮かせる方法はありますcontainerかcontainer?

これが初心者の質問である場合は申し訳ありませんが、私はこの間、アイソトープのドキュメントを読んでいて、頭を悩ませています。

4

1 に答える 1

1

私はそれをハッキングしていて、それを行う方法を見つけました。

$('#container').preloader({
  loader: '/images/loading.gif',
  fadeIn: 700,
  delay : 200 
});

プリローダー プラグインは、コンテナー タイプの div で機能します。div を選択するだけで、そのすべての子が一度に 1 つずつプリロードされます。画像の重ね合わせを停止するには、js を使用するだけです。

$(window).load(function(){ ...

このようにロードすると、その問題が解決します。

私のデータが不足していることについて申し訳ありませんが、助けようとしたすべての人にハイタッチします。:)

于 2013-03-08T07:03:02.940 に答える