0

我对这个游戏还是新手，所以我可能会做一些愚蠢的事情，但我不太确定那是什么。我有一个使用 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 -->

此外，在我的过滤器触发之前，这里有一个带有此代码的延迟加载触发器。

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

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

谢谢

4

0 回答 0