Javascript Lazyload和过滤的图像列表

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

过滤器工作正常。然而，当我尝试让Lazyload工作时，在所有图像加载之前单击过滤器，它们会得到预加载的灰盒图像

你可以在这里看到它的作用

我在这里还添加了一个JSFIDLE：带有一个由于某种原因没有显示在FIDLE上的图像的缩减列表。我的代码就在这里，尽管我知道这并没有真正显示问题所在

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

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

---

谢谢

问题是，如果用户从不向下滚动，你的延迟加载图像将永远无法加载。当他们点击过滤器时，你总是会看到灰色的框。谢谢@ChrisArasin，我有点想到了这一点，尽管我真的不知道怎样才能最好地绕过它。有没有一个简单的修复方法可以避免这种情况？

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