Question

我有自定义内容滚动条jQuery custom content scroller的容器：这段代码：

(function($){
    $(window).load(function(){
        $(".content").mCustomScrollbar({
            scrollButtons: { enable: true },
            mouseWheelPixels: 250
        });
    });
})(jQuery);

我想在Lazy Load中使用它：

$(function() {
  $("img.lazy").lazyload({
     effect : "fadeIn",
     container: $(".content")
  });
});

我认为它应该使用Scroller页面的回调函数，但我对jquery不好，所以我的结果不成功。

当我使用下面的代码时，它会在页面加载时加载所有图像：

$(function() {
  $("img.lazy").lazyload({
     effect : "fadeIn",
     container: $(".mCSB_container")
  });
});

authos说这可以通过编写一个简单的js函数并在whileScrolling事件上调用它来完成。

感谢您的帮助。

Answer 1

您尝试使用container不起作用，因为mCustomScrollbar不使用滚动容器，而是在overflow: hidden容器中相对定位以实现滚动。我能想到的最干净的方法是使用自定义[event触发lazyload] [1]。以下是我为HasanGürsoy给出的示例文件执行的操作：

<script>
$(document).ready(function () {
    var filledHeight = 250;
    $(window).load(function () {
        $(".scroll").height($(window).height() - filledHeight);
        $(".scroll").mCustomScrollbar({ scrollButtons: { enable: true },
        mouseWheelPixels: 250,
        callbacks: { whileScrolling: function() {
            var scroller = $(".mCSB_container");
            var scrollerBox = scroller.closest(".mCustomScrollBox");
            $(".scroll img.lazy").filter(function() {
                var $this = $(this);
                if($this.attr("src") == $this.data("src")) return false;
                var scrollerTop = scroller.position().top;
                var scrollerHeight = scrollerBox.height();
                var offset = $this.closest("div").position();
                return (offset.top < scrollerHeight - scrollerTop);
            }).trigger("lazyScroll");
            }}});

        $("img.lazy").lazyload({ event: "lazyScroll" });
    });
});
</script>

我还使用whileScrolling回调，但仅用于检查哪些img.lazy图片可见。它们是否与容器的相对位置不大于容器的高度减去其CSS top属性。（假设您始终向上滚动→向下滚动;此设置无法识别因为您向下滚动太远而无法显示的图像。）对于这些图像，该函数会触发自定义lazyScroll事件，这是lazyload使用的事件触发加载图像。

请注意，此解决方案还不是非常便携：您必须将.mCSB_container和.mCustomScrollBox的查询替换为获取与脚本当前滚动框关联的元素的查询在多个mCustomScrollbar的情况下工作。在实际场景中，我还会缓存jQuery对象，而不是在每次调用回调时重新创建它们。

Answer 2

我认为作者意味着还要加入这样的whileScrolling事件：

(function($){

    $(window).load(function(){

        $("#content_1").mCustomScrollbar({
            scrollButtons:{
                enable:true
            },
            callbacks:{
                whileScrolling:function(){ WhileScrolling(); } 
            }
        });

        function WhileScrolling(){
            $("img.lazy").lazyload();
        }

    });

})(jQuery);

HTML容器如下所示：



<div id="content_1" class="content">
    <p>Lorem ipsum dolor sit amet. Aliquam erat volutpat. Maecenas non tortor nulla, non malesuada velit.</p>
    <p>
        <img class="lazy img-responsive" data-original="/img/bmw_m1_hood.jpg" width="765" height="574" alt="BMW M1 Hood"><br/>
        <img class="lazy img-responsive" data-original="/img/bmw_m1_side.jpg" width="765" height="574" alt="BMW M1 Side"><br/>
        <img class="lazy img-responsive" data-original="/img/viper_1.jpg" width="765" height="574" alt="Viper 1"><br/>
        <img class="lazy img-responsive" data-original="/img/viper_corner.jpg" width="765" height="574" alt="Viper Corner"><br/>
        <img class="lazy img-responsive" data-original="/img/bmw_m3_gt.jpg" width="765" height="574" alt="BMW M3 GT"><br/>
        <img class="lazy img-responsive" data-original="/img/corvette_pitstop.jpg" width="765" height="574" alt="Corvette Pitstop"><br/> 
    </p>
    <p>Aliquam erat volutpat. Maecenas non tortor nulla, non malesuada velit. Nullam felis tellus, tristique nec egestas in, luctus sed diam. Suspendisse potenti. </p>
    <p>Consectetur adipiscing elit. Nulla consectetur libero consectetur quam consequat nec tincidunt massa feugiat. Donec egestas mi turpis. Fusce adipiscing dui eu metus gravida vel facilisis ligula iaculis. Cras a rhoncus massa. Donec sed purus eget nunc placerat consequat.</p>
    <p>Cras venenatis condimentum nibh a mollis. Duis id sapien nibh. Vivamus porttitor, felis quis blandit tincidunt, erat magna scelerisque urna, a faucibus erat nisl eget nisl. Aliquam consequat turpis id velit egestas a posuere orci semper. Mauris suscipit erat quis urna adipiscing ultricies. In hac habitasse platea dictumst. Nulla scelerisque lorem quis dui sagittis egestas.</p> 
    <p>Etiam sed massa felis, aliquam pellentesque est.</p>
    <p>the end.</p>
</div>

要在滚动期间减少lazyload()的数量，我们可以使用例如滚动内容的顶部位置（像素）的mcs.top属性：

function WhileScrolling()
{
    // Debug:
    // console.log( 'top: ' + mcs.top );

    // Run lazyload in 10 pixel steps (adjust to your needs) 
    if( 0 == mcs.top % 10 )
    {
        // Run lazyload on the "div#conent_1" box:
        $("#content_1 img.lazy").lazyload();

        // Debug:
        //console.log( 'lazyload - mcs.top: ' + mcs.top );
    }
}

我们限制layzload选择器，所以我们不必在整个DOM树中找到所有图像。

我注意到在 Internet Explorer 11 中，mcs.top可以是浮动数字，但它在 Chrome 中是整数整数。

所以我们可以使用Math.floor() 发布。

为了进一步减少延迟调用，我们还可以将mcs.top与之前的值进行比较：

var mcsTopPrev = 0;
var mcsTop = 0;
function WhileScrolling()
{
    // Fix the Chrome vs Internet Explorer difference
    mcsTop = Math.floor( mcs.top );

    // Current vs previous 
    if(  mcsTop != mcsTopPrev )
    {
        // Run lazyload in 10px scrolling steps (adjust to your needs)
        if( 0 == mcsTop % 10 )
        {
            $("#cphContent_lReferences img.lazy").lazyload();
        }
    }
    mcsTopPrev =  mcsTop;
}

Answer 3

最后我写了这个，可以从mCustomScrollbar回调中调用：

    function lazyLoad(selector,container) {     

      var $container=$(container);            
      var container_offset=$container.offset();
      container_offset.bottom=container_offset.top+$container.height();

      $(selector,$container).filter(function(index,img){
        if (!img.loaded) {                    
          var img_offset=$(img).offset();     
          img_offset.bottom=img_offset.top+img.height;
          return (img_offset.top<container_offset.bottom && (img_offset.top>0 || img_offset.bottom>0));
        }                                                                                                                                        
      }).trigger('appear');

    }

如果图像大小是恒定的并且图像列表很大，则可能值得使用二分法搜索第一个图像，然后计算“＆＃39;出现的索引的范围”。必须使用已知的图像和容器尺寸以及匹配图像的偏移量（）来触发事件...

Answer 4

我使用插件Lazy Load和Custom Content Scroller并遇到同样的问题。

对我来说有用的是在 mCustomScrollbar的 whileScrolling 事件中添加一个回调，在其中我触发了一个我懒惰的容器的滚动事件：

/* Lazy load images */
$(".blog-items img.lazyload").lazyload({
  effect: "fadeIn",
  effect_speed: 1000,
  skip_invisible: true,
  container: $(".blog-items")
});

/* Custom scrollbar */
$(".blog-items").mCustomScrollbar({
  theme: "rounded-dark",
  callbacks: {
    whileScrolling: function() {
      $(".blog-items").trigger("scroll");
    }
  }
});

我将 lazyload的属性 skip_invisible 设置为true，以期提高性能。如果您遇到任何问题，请设置为false。

jQuery自定义滚动条和延迟加载

4 个答案: