3

我正在使用使用Bxslider的图片库。我在幻灯片中有超过 15 张图像，这需要很长时间才能加载。因此，当特定幻灯片出现时，我需要在每个滑块中一张一张地加载图像。我从这里lazyload 和 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);
    });
});
4

2 回答 2

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);
});
于 2017-04-06T11:24:54.620 回答
0

您可以通过添加“欺骗”浏览器移动 1 px：
$(window).scrollTop($(window).scrollTop()+1); 触发 a.bx-prev 和 a.bx-next

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

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

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

于 2014-01-18T20:32:42.490 回答