如何使用BXSlider实现图片的懒加载

Question

我正在使用Bxslider图片库。幻灯片中有15张以上的图片，加载时间很长。所以我需要在每个幻灯片显示时逐一加载图片。我从这里得到了一个例子lazyload and bxslider，它使用LazyLoad来加载图片。但是对我来说没有用。有人能帮我吗？

我正在使用以下代码：

    $(document).ready(function(){
    $("#moreLessons").bxSlider( { 
        startingSlide:1,
        pager: false
    });
    // trigger lazy to load new in-slided images
    $("a.bx-prev, a.bx-next").bind("click", function() {
        // extra call for lazy loading
        setTimeout(function() { $(window).trigger("scroll"); }, 100);
    });
});

- Anoop John

---

请展示您正在使用的代码，以便我们能够提供进一步的帮助。 - Breezer

抱歉，但“它不起作用”并不是问题的描述。以目前的形式，您的问题无法得到合理的回答...投票关闭。 - ahren

请查看控制台以查看是否有任何错误。 - Spokey

Answer 1

<div class="slider">
    <div>
        <img src="http://placekitten.com/400/200">
    </div>
    <div>
        <img class="lazy" src="http://placekitten.com/450/200" data-src="http://placekitten.com/450/200">
    </div>
    <div>
        <img class="lazy" src="http://placekitten.com/500/200" data-src="http://placekitten.com/500/200">
   </div>
</div>

$(function(){

    // create an options object to store your slider settings
    var slider_config = {
        mode: 'horizontal', // place all slider options here
        onSlideBefore: function($slideElement){
            var $lazy = $slideElement.find(".lazy")
            var $load = $lazy.attr("data-src");
            $lazy.attr("src",$load).removeClass("lazy");
             alert(JSON.stringify($lazy));
        }
    }
    // init the slider with your options
    var slider = $('.slider').bxSlider(slider_config);
});

- Sandeep Sherpur

---

“懒加载”图片的属性src是否设置为正确的图片？它不应该是空的或者第一张图片的副本吗？顺便说一句，做得很好！ - Beamer

Answer 2

您可以通过添加以下代码“欺骗”浏览器移动1像素：
$(window).scrollTop($(window).scrollTop()+1); 并在a.bx-prev和a.bx-next上触发。

然后，您可以设置：
$(window).scrollTop($(window).scrollTop()-1); 立即在调用事件之后触发。

因此，如果幻灯片有50张图片，则最终您不会向下滚动页面50px。

这种方法也适用于Drupal 7中的bxslider，只需添加lazyload模块。只需启用lazyload，将加载图标设置为“none”，并将上述JavaScript调用添加到视图中bxslider设置的回调部分即可。完成！随意放置所有高分辨率图像。

- ZhuRenTongKu