jquery – Lazy Loading in Flexslider

前端之家收集整理的这篇文章主要介绍了jquery – Lazy Loading in Flexslider前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我试图通过使用Lazy Loading jquery插件,并按照本网站上的说明,懒惰加载工作 Flexsliderhttp://www.appelsiini.net/projects/lazyload

我正在加载插件脚本,在控制台上看不到任何错误.我尝试没有容器或选项在lazyload函数中传递,仍然没有.我花了几个小时

$("img.lazy").lazyload({
  effect: "fadeIn",container: $(".slides > li")
});

有人知道如何在Flexslider中进行懒惰加载?

解决方法

我在滚动过程中实现了一个懒惰的负载.与此处提出的其他解决方案相比,该解决方案对于大型收藏来说效果更好.在初始化期间,它仅加载前5个图像,然后为每个动画加载3张图像.
<li>
  <img class="lazy" src="loading-image.jpg" src="actual-image.jpg" />
</li>

和javascript代码

$('.flexslider').flexslider({
        animation: "slide",animationLoop: false,controlNav: false,init: function (slider) {
            // lazy load
            $("img.lazy").slice(0,5).each(function () {
                var src = $(this).attr("data-src");
                $(this).attr("src",src).removeAttr("data-src").removeClass("lazy");
            });
        },before: function (slider) {
            // lazy load
            $("img.lazy").slice(0,3).each(function () {
                var src = $(this).attr("data-src");
                $(this).attr("src",src).removeAttr("data-src").removeClass("lazy");
            });
        }
    });
原文链接:https://www.f2er.com/jquery/180503.html

猜你在找的jQuery相关文章