私はまだこのゲームに慣れていないので、何かばかげたことをしている可能性がありますが、それが何であるかはよくわかりません。Bootstrap3 を使用してポートフォリオ サイトを構築しています。これで、ページ全体に並べ替えられていない画像のリストを読み込んでいますが、現時点では約 40 ほどあります。これらはゆっくりと同期されていないため、これを支援するために lazyload プラグインを適用しようとしていました。私の画像リストは、li クラスに応じて表示/非表示を切り替えるいくつかのフィルターにリンクされています。
フィルターは正常に機能します。ただし、Lazyload を機能させようとして、すべての画像が読み込まれる前にフィルターをクリックすると、事前に読み込まれた灰色のボックス画像が表示されます。
ここで実際の動作を見ることができます。http://megmackayphoto.com/Beta/portfolio4.html
また、ここに JSfiddle を追加しました 。私が持っているコードはここにありますが、これが実際に問題を示していないことを感謝します。
<div class="container-fluid">
<div id="portfolio">
<div class="row">
<div data-spy="affix" data-offset-top="0" data-offset-bottom="200">
<!-- this is the control to show which images appear -->
<ul id="filter">
<li style="list-style-type: none" class="all"><a href="#">all</a></li>
<li style="list-style-type: none" class="people"><a href="#people">people</a></li>
<li style="list-style-type: none" class="things"><a href="#things">things</a>
</li>
</ul>
</div>
<!-- end affix -->
</div>
<ul id="portfolio">
<li class="people">
<img class="lazy img-responsive" src="http://www.megmackayphoto.com/Beta/lib/img/transparent.gif" dataoriginal="http://www.megmackayphoto.com/Beta/lib/img/thumbs/people/140220_MabelFlwrCrwn_056.jpg" width="185" height="185">
</li>
<li class="people">
<img class="lazy img-responsive" data-original="http://www.megmackayphoto.com/Beta/lib/img/thumbs/people/140220_MabelFlwrCrwn_129.jpg" width="185" height="185">
</li>
<li class="people">
<img class="lazy img-responsive" data-original="http://www.megmackayphoto.com/Beta/lib/img/thumbs/people/131017_FlowerWall_215.jpg" width="185" height="185">
</li>
<li class="people">
<img class="lazy img-responsive" data-original="http://www.megmackayphoto.com/Beta/lib/img/thumbs/people/131017_FlowerWall_233.jpg" width="185" height="185">
</li>
<li class="people">
<img class="lazy img-responsive" data-original="http://www.megmackayphoto.com/Beta/lib/img/thumbs/people/130907_3DayPortraits_151.jpg" width="185" height="185">
</li>
<li class="people">
<img class="lazy img-responsive" data-original="http://www.megmackayphoto.com/Beta/lib/img/thumbs/people/130907_3DayPortraits_140.jpg" width="185" height="185">
</li>
<li class="things">
<img class="lazy img-responsive" data-original="http://www.megmackayphoto.com/Beta/lib/img/thumbs/things/130712_PeachWedding_147.jpg" width="185" height="185">
</li>
</ul>
</div>
</div>
<!-- End row -->
</div>
<!-- End portfolio -->
</div>
<!-- end container -->
さらに、フィルター トリガーの前に来るこのコードを使用して、ここに遅延ロード トリガーがあります。
$(function () {
$("img.lazy").lazyload({
no_fake_img_loader: true
});
});
ほのめかしたように、私はおそらく本当にばかげたことをしているのですが、それを理解できません。どんな助けでも大歓迎です。ここで重要な情報が欠落している場合は、大声でお知らせください。より多くのポインタ/情報を提供しようとします.
ありがとう