JQuery пользовательских прокрутки и ленивые нагрузки

Question

У меня есть контейнер с пользовательского контента скроллер jQuery custom content scroller: Этот код:

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

И я хотел бы использовать его с Ленивый Load:

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

Я думаю, что это должен работать с функцией callbacks со страницы Scroller, но я не очень хорошо разбираюсь в jquery, поэтому мои результаты не увенчались успехом.

Когда я использую свой код, как показано ниже он загружает все изображения на странице загрузки:

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

authos говорит, что это может быть сделано в письменной форме простой Js функцию и вызвать его на whileScrolling события.

Спасибо за любую помощь.

Answer 1

Я думаю, что автор имел в виду дополнительно закреплять в 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 может быть плавающим, но это alwyas целых целых чисел в Chrome.

Таким образом, мы могли бы floor с 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 2

Попытка использовать container не работает, потому что mCustomScrollbar не использует прокрутку контейнеров, но относительное позиционирование в overflow: hidden контейнер для достижения прокрутки. Самый чистый подход, который я могу придумать, - использовать пользовательское [событие для запуска lazyload] [1]. Вот как я хотел бы сделать это для примера файла данного Гасан 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 изображений видимы. Они, если их относительное положение к контейнеру не превышает высоту контейнера минус его свойство CSS top. (Предполагая, что вы всегда прокручиваете верхнюю часть → вниз, эта настройка не распознает изображения, которые являются невидимыми, потому что вы прокручивали слишком далеко вниз.) Для этих изображений функция затем запускает пользовательское событие lazyScroll, которое является событием, которое lazyload использует для запуска загрузки изображений.

Обратите внимание, что это решение не очень переносимо: вам нужно будет заменить запросы для .mCSB_container и .mCustomScrollBox теми, которые принесут вам элементы, связанные с текущим окном прокрутки, для сценария, который будет работать в ситуациях, один mCustomScrollbar. В реальном сценарии я также кэшировал объекты jQuery, а не воссоздавал их при каждом вызове обратного вызова.

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'); 

    } 

Если размер изображения постоянен и список изображений огромен, возможно, это может быть стоит искать для первого изображения с использованием дихотомии затем вычислить диапазон индексов, для которых событие «появляется» должно быть запущено с использованием известных размеров изображения и контейнера, и смещение() совпадающего изображения ...

Answer 4

Я использую плагины Lazy Load с Custom Content Scroller и имел такую ​​же проблему ,

То, что сработало для меня, чтобы добавить функцию обратного вызова дляwhileScrolling события mCustomScrollbar в, в течение которого я вызвать событие прокрутки контейнера, который я lazyloading:

/* 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 до истины в надежде на повышение производительности. Установите значение false, если у вас возникнут какие-либо проблемы.