Question

当我将它与一个简单的jquery过滤器结合使用时，我正在努力使用jquery Lazyload脚本。乍一看，这一切看起来都很顺利，但是当我把它与过滤结合起来时，我就陷入了麻烦之中。本质上，当我应用过滤器时，最初位于折叠下方的图像（即那些尚未向下滚动的图像）未显示，只有占位符，没有办法（我可以看到）改变此

有人可以帮忙吗？我猜这是相对简单的事情。您可以在此处查看问题：http://megmackayphoto.com/port ...然后在滚动之前在左侧应用过滤器。

我在这里也添加了一个示例小提琴：http://jsfiddle.net/iameuanmackay/hybf13h1/

代码：

                <ul id="filter">
                    <li style="list-style-type: none" class="all"><a href="#">all</a>
                    </li>
                    <br>
                    <li style="list-style-type: none" class="people"><a href="#people">people</a>
                    </li>
                    <br>
                    <li style="list-style-type: none" class="things"><a href="#things">things</a>
                    </li>
                    <br>
                </ul>
            </div>
            <!-- end affix -->
        </div>
        <!-- container -->
        <div id="visible-container">
            <div class="col-xs-10 col-xs-push-1 col-sm-9 col-sm-push-2 col-md-10 col-lg-7 col-lg-push-3" style="padding-left:5px">
                <ul id="portfolio">
                    <li class="people"><a href="portfolio/people1.html"><img class="lazy" data-original="http://megmackayphoto.com/lib/img/thumbs/people/140220_MabelFlwrCrwn_056.jpg" width="185" height="185"></a>
                    </li>
                    <li class="people"><a href="portfolio/people1.html"><img class="lazy" data-original="http://megmackayphoto.com/lib/img/thumbs/people/140220_MabelFlwrCrwn_129.jpg" width="185" height="185"></a>
                    </li>
                    <li class="people"><a href="portfolio/people2.html"><img class="lazy" data-original="http://megmackayphoto.com/lib/img/thumbs/people/131017_FlowerWall_215.jpg" width="185" height="185"></a>
                    </li>
                    <li class="people"><a href="portfolio/people2.html"><img class="lazy" data-original="http://megmackayphoto.com/lib/img/thumbs/people/131017_FlowerWall_233.jpg" width="185" height="185"></a>
                    </li>
                    <li class="people"><a href="portfolio/people3.html"><img class="lazy" data-original="http://megmackayphoto.com/lib/img/thumbs/people/130907_3DayPortraits_151.jpg" width="185" height="185"></a>
                    </li>
                    <li class="people"><a href="portfolio/people3.html"><img class="lazy" data-original="http://megmackayphoto.com/lib/img/thumbs/people/130907_3DayPortraits_140.jpg" width="185" height="185"></a>
                    </li>
                    <li class="things"><a href="portfolio/things4.html"><img class="lazy" data-original="http://megmackayphoto.com/lib/img/thumbs/things/130712_PeachWedding_147.jpg" width="185" height="185"></a>
                    </li>
                    <li class="things"><a href="portfolio/things4.html"><img class="lazy" data-original="http://megmackayphoto.com/lib/img/thumbs/things/130712_PeachWedding_065.jpg" width="185" height="185"></a>
                    </li>
                    <li class="people"><a href="portfolio/people4.html"><img class="lazy" data-original="http://megmackayphoto.com/lib/img/thumbs/people/130331_ScotlandEaster_090.jpg" width="185" height="185"></a>
                    </li>
                    <li class="people"><a href="portfolio/people4.html"><img class="lazy" data-original="http://megmackayphoto.com/lib/img/thumbs/people/130331_ScotlandEaster_095.jpg" width="185" height="185"></a>
                    </li>
                    <li class="people"><a href="portfolio/people5.html"><img class="lazy" data-original="http://megmackayphoto.com/lib/img/thumbs/people/120830_SeattlePics_411.jpg" width="185" height="185"></a>
                    </li>
                    <li class="people"><a href="portfolio/people5.html"><img class="lazy" data-original="http://megmackayphoto.com/lib/img/thumbs/people/130813_ScotlandTrip_110.jpg" width="185" height="185"></a>
                    </li>
                    <li class="people"><a href="portfolio/people6.html"><img class="lazy" data-original="http://megmackayphoto.com/lib/img/thumbs/people/140318_KirstyGrieve_235.jpg"  width="185" height="185"></a>
                    </li>
                    <li class="people"><a href="portfolio/people6.html"><img class="lazy" data-original="http://megmackayphoto.com/lib/img/thumbs/people/140318_KirstyGrieve_391.jpg" width="185" height="185"></a>
                    </li>
                    <li class="people"><a href="portfolio/people7.html"><img class="lazy" data-original="http://megmackayphoto.com/lib/img/thumbs/people/260913_HelenPatrick_208b.jpg" width="185" height="185"></a>
                    </li>
                    <li class="people"><a href="portfolio/people7.html"><img class="lazy" data-original="http://megmackayphoto.com/lib/img/thumbs/people/260913_HelenPatrick_162.jpg" width="185" height="185"></a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>

lazyload触发器是： $（function（）{ $（＆＃34; img.lazy＆＃34）。lazyload（）门槛：100; 效果：＆＃34; scrollstop＆＃34 ;; }）;

非常感谢任何帮助。

由于

Answer 1

这是因为lazyload只查找特定事件（即：scroll，scrollstop）以检测图像是否在视图中。

此外，jquery lazyload在运行时性能方面存在一些缺点，并且使用AJAX网站/ SPA泄漏内存。

我建议使用https://github.com/aFarkas/lazysizes，它引入了一个新的时代＆＃34; lazyloader＆＃34;通过检测文档图像中当前可见性的任何可见性变化以及任何未来图像，无需任何JS配置或需要调用任何JS函数。此外，我已投入大量精力使其尽可能高效地运行，网络和内存。

在作品https://github.com/aFarkas/wp-lazysizes中还有一个wordpress插件。它目前是alpha / beta，但应该可以满足您的需求。

延迟加载和过滤器问题 - 下方的图像不显示

1 个答案: