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

Question

我有容器与自定义内容滚动jQuery自定义内容滚动:这段代码:

(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属性.(假设你总是滚动顶部→向下;因为你滚动太远这种设置不承认这是invisibile图像)对这些图像的功能,那么会触发自定义lazyScroll事件,这是lazyload用来触发加载图像的事件.

请注意,此解决方案尚不具备可移植性:您必须替换查询,.mCSB_container以及.mCustomScrollBox获取与当前滚动框关联的元素的查询,以使脚本在多个情况下工作mCustomScrollbar.在实际场景中,我还会缓存jQuery对象,而不是在每次调用回调时重新创建它们.

Answer 2

我认为作者的意思是另外加入whileScrolling这样的事件：

\n\n

(function($){\n\n    $(window).load(function(){\n\n        $("#content_1").mCustomScrollbar({\n            scrollButtons:{\n                enable:true\n            },\n            callbacks:{\n                whileScrolling:function(){ WhileScrolling(); } \n            }\n        });\n\n        function WhileScrolling(){\n            $("img.lazy").lazyload();\n        }\n\n    });\n\n})(jQuery);\n

\n\n

其中 HTML 容器如下所示：

\n\n

\n\n
<div id="content_1" class="content">\n    <p>Lorem ipsum dolor sit amet. Aliquam erat volutpat. Maecenas non tortor nulla, non malesuada velit.</p>\n    <p>\n        <img class="lazy img-responsive" data-original="/img/bmw_m1_hood.jpg" width="765" height="574" alt="BMW M1 Hood"><br/>\n        <img class="lazy img-responsive" data-original="/img/bmw_m1_side.jpg" width="765" height="574" alt="BMW M1 Side"><br/>\n        <img class="lazy img-responsive" data-original="/img/viper_1.jpg" width="765" height="574" alt="Viper 1"><br/>\n        <img class="lazy img-responsive" data-original="/img/viper_corner.jpg" width="765" height="574" alt="Viper Corner"><br/>\n        <img class="lazy img-responsive" data-original="/img/bmw_m3_gt.jpg" width="765" height="574" alt="BMW M3 GT"><br/>\n        <img class="lazy img-responsive" data-original="/img/corvette_pitstop.jpg" width="765" height="574" alt="Corvette Pitstop"><br/> \n    </p>\n    <p>Aliquam erat volutpat. Maecenas non tortor nulla, non malesuada velit. Nullam felis tellus, tristique nec egestas in, luctus sed diam. Suspendisse potenti. </p>\n    <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>\n    <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> \n    <p>Etiam sed massa felis, aliquam pellentesque est.</p>\n    <p>the end.</p>\n</div>\n
\n\n

\n\n

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

\n\n

function WhileScrolling()\n{\n    // Debug:\n    // console.log( \'top: \' + mcs.top );\n\n    // Run lazyload in 10 pixel steps (adjust to your needs) \n    if( 0 == mcs.top % 10 )\n    {\n        // Run lazyload on the "div#conent_1" box:\n        $("#content_1 img.lazy").lazyload();\n\n        // Debug:\n        //console.log( \'lazyload - mcs.top: \' + mcs.top );\n    }\n}\n

\n\n

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

\n\n

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

\n\n

所以我们可以用 来地板它Math.floor()。

\n\n

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

\n\n

var mcsTopPrev = 0;\nvar mcsTop = 0;\nfunction WhileScrolling()\n{\n    // Fix the Chrome vs Internet Explorer difference\n    mcsTop = Math.floor( mcs.top );\n\n    // Current vs previous \n    if(  mcsTop != mcsTopPrev )\n    {\n        // Run lazyload in 10px scrolling steps (adjust to your needs)\n        if( 0 == mcsTop % 10 )\n        {\n            $("#cphContent_lReferences img.lazy").lazyload();\n        }\n    }\n    mcsTopPrev =  mcsTop;\n}\n

\n