Lazy Load Plugin

[yank76]

Hi !

How to run this plugin with Lazy Load Plugin http://www.appelsiini.net/projects/lazyload/enabled_noscript.html ?

Because the problem is that these images are not loading after desaturated...

Thank you !

[GianlucaGuarini]

It shouldn't be too complicated, I don't think you need lazyload.js to achieve that. Just check the scrollTop position and as soon an image is on your viewport you can trigger jquery.BlackAndWhite.js

// trigger the event on scroll
$(window).on('scroll', function() {
  // get the scroll top and add the viewport height to it
  var scrollTop = $(document).scrollTop() + $(window).height();
  // loop only the bw wrappers containing the images not loaded yet
  $('.bwWrapper.toLoad').each(function() {
    // get the wrapper offset top
    var imageOffsetTop = $(this).offset().top;
    // if the bw wrapper is in your viewport trigger the plugin load event
    if (scrollTop > imageOffsetTop)
      $(this).BlackAndWhite({
        onImageReady: function(img) {
          // fade in the wrapper
          $(img).parent().animate({
            opacity: 1
          }).removeClass('toLoad'); // remove it from the next loop
        }
      });
  });
});

This code is really ugly but is useful to show you the step needed to achieve your goal good luck