Question

我还是这个游戏的新手，所以我可能会做一些愚蠢的事，但我不太确定那是什么。我有一个使用Bootstrap3构建的投资组合网站。在这里，我在整页中加载未排序的图像列表，目前大约有40个左右。这些加载缓慢且不同步所以我试图应用lazyload插件来帮助解决这个问题。我的图片列表链接到几个过滤器，根据他们的li类显示/隐藏它们。

过滤器工作正常。但是，当我试图让Lazyload工作时，在所有图像加载之前点击过滤器，它们就会得到预先加载的灰盒图像。

你可以在这里看到它的实际效果。 http://megmackayphoto.com/Beta/portfolio4.html

我还在这里添加了一个JSfiddle：http://jsfiddle.net/iameuanmackay/w5kwwjpm/带有一个缩小的图像列表（由于某种原因，这些图像没有显示在小提琴上）。我的代码就在这里，但我很欣赏这并没有真正显示出这个问题。

 <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 -->

此外，在我的过滤器触发之前，此代码中存在一个lazyload触发器。

$(function () {
$("img.lazy").lazyload({
 no_fake_img_loader: true
});
});

正如我所提到的，我可能正在做一些非常愚蠢的事情，但我无法弄明白。任何帮助将非常感谢。如果我在这里遗漏了任何重要信息，请大声喊叫，我会尝试提供更多指示/信息。

由于

延迟加载和过滤的图像列表

0 个答案: