6

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

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

我想将它与延迟加载一起使用：

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

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

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

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

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

谢谢你的帮助。

4

4 回答 4

5

您尝试使用container不起作用，因为mCustomScrollbar不使用滚动容器，而是使用容器中的相对定位overflow: hidden来实现滚动。我能想到的最简洁的方法是使用自定义[事件触发延迟加载][1]。以下是我对 Hasan Gü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图像是可见的。如果它们与容器的相对位置不大于容器的高度减去其 CSStop属性，则它们是。（假设您总是从上往下滚动；此设置无法识别由于您向下滚动太远而不可见的图像。）对于这些图像，该函数会触发自定义lazyScroll事件，该事件是延迟加载用来触发加载图像的事件。

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

于 2014-03-25T07:52:22.417 回答
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;
}
于 2014-03-22T17:37:02.253 回答
1

我正在使用带有自定义内容滚动器的插件延迟加载并且遇到了同样的问题。

对我有用的是向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。

于 2016-12-14T13:08:22.970 回答
0

最后我写了这个可以从 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');

    }

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

于 2015-06-24T17:22:50.297 回答