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

我有容器与自定义内容滚动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 to trigger lazyload] [1]。 以下是我为HasanGürsoy给出的示例文件执行的操作：

我也使用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容器的位置如下：

 
 
Lorem ipsum dolor sit amet. Aliquam erat volutpat. Maecenas non tortor nulla, non malesuada velit.
 
 
 
 
 
 
 
 
 
Aliquam erat volutpat. Maecenas non tortor nulla, non malesuada velit. Nullam felis tellus, tristique nec egestas in, luctus sed diam. Suspendisse potenti. 
 
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.
 
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.
 
Etiam sed massa felis, aliquam pellentesque est.
 
the end.
  

为了在滚动期间减少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() 。

为了进一步减少lazyload调用，我们还可以将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.top0 || img_offset.bottom>0)); } }).trigger('appear'); } 

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

Answer 4

我使用插件Lazy Load with 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。