如何使用 BXSlider 进行延迟加载答案

【问题标题】：How to do lazy loading with BXSlider如何使用 BXSlider 进行延迟加载
【发布时间】：2013-04-11 06:26:51
【问题描述】：

我正在使用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);
    });
});

【问题讨论】：

请出示您正在使用的代码，以便我们提供进一步的帮助
抱歉，“它不起作用” 不是对问题的描述。以目前的形式，您的问题无法得到合理的回答……投票结束。
在控制台中查看是否有任何错误

标签： jquery html css bxslider lazy-loading

【解决方案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);
});

【讨论】：

“懒惰”图像将 attr src 设置为正确的图像是否正确？它不应该是空的还是第一张图片的副本？顺便说一句，干得好！

【解决方案2】：

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

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

因此，如果幻灯片是 50 张图片，那么到最后您将不会向下滚动页面 50px。

此方法也适用于 Drupal 7 中的 bxslider，并添加了延迟加载模块。只需启用延迟加载，将加载图标设置为“无”，然后将上述 javascript 调用添加到视图中 bxslider 设置的回调部分。瞧！来吧，把所有你喜欢的高分辨率图像放在那里。

【讨论】：