SmoothScrollDiv w/ LazyLoad

[iamdangavin]

Hey I am using this plugin to work with a very large gallery. I need to use LazyLoad to only load the images in the viewport. Nothing seems to be working. If I have 20 images, only 15 will load, then the other ones don't get loaded when they scroll into view.

Any thoughts on what should be done?

Screenshot: http://cl.ly/image/0Y1U1C1Y1L33

[tkahn]

Hi!

I haven't tried using Smooth Div Scroll together with LazyLoad, but I am familiar with the plugin. Just from the top of my head, I think there can be problems due to the fact that Smooth Div Scroll needs to know the total width of all the images/elements inside the scrollable area to work properly. Smooth Div Scroll gets this either by loading all images or looking at the CSS. If you use something like LazyLoad, the problems you are experiencing are probably caused by the fact that Smooth Div Scroll cannot calculate the proper total width of all elements because LazyLoad prevents the browser from loading all elements.

But this is just a theory. You'd have to build a demo page and look at what width Smooth Div Scroll calculates and go from there. Unfortunately I have other issues that are more pressing regarding this plugin. Perhaps you could look into this and report back here?

/Thomas

[andrewminton]

Hi Thomas, I've been looking into this as well and even if I use the src attribute to mirror the dimensions of the data-original attribute in lazyload, smoothdivscroll does not load images when I scroll. this would be a great feature to incorporate/support so any testing I can do or uncover I'd like to help out and get to a solution. I'll keep digging.

[andrewminton]

Weirdly when I trigger a resize of the browser in an area of the scroll that won't load the data-original attributes.. the event is triggered and the images are replaced.

[andrewminton]

what if a call back was created for when scrolling has stopped, not just autoScrollingStopped? this could then allow us to trigger the lazyload when the callback has finished maybe? thoughts?

[andrewminton]

I'm not sure if I've resolved this but by binding to the mousewheel event, I've managed to lazyload the elements I think:
$('#project').bind('mousewheel', function(event, delta, deltaX, deltaY) {
// console.log(delta, deltaX, deltaY);
$("img.lazy").lazyload({container: $("#project")});
});

[tkahn]

A "scrolling has stopped" callback is an interesting idea! I say this without having looked into the specific details of how it would be implemented. In Issue #38 there's a similar discussion going on, but it has to do with getting the auto scrolling status from the plugin.

[andrewminton]

Kinetic Library has the Stopped Listener which you have already used in the touchscrolling method. Could be some useful code there to factor in. I'm trying to trigger a swap out of content in a div based on the offset.left position of the series of images in the smooth div scroll. Having access to the stopped callback would allow a redraw type function where it triggers a check on offset.left and allows me to calculate what description text I need to populate the div with.

I have the swap out method of text working with a bind to the mousewheel function but touchmove or when touch/scroll events have completed would be ace.

[andrewminton]

Also, debounce might be another approach? http://jsfiddle.net/hYsRh/4/ but this is dependant on whether smooth div scroll actually binds to the browsers native scroll method or not, which I'm unsure if it does.

[shaekuronen]

found a solution to the lazyload images not having their width correct issue. I was already setting the width attribute on images, bc smoothDivScroll does not seem to check width attr, I get the attr width and set it as inline css width, then init smoothDivScroll as a callback. works, though a little less automagically, as you have to set the width attr

  $(document).ready(function() {

    $('.tw-slider .tw-lazyload').each(function() {

      var the_image = $(this);
          the_width = $(the_image).attr('width');

      $(the_image).css('width', the_width + 'px');

    }, init_smooth_div_scroll() );

    function init_smooth_div_scroll() {

      $('.tw-slider').smoothDivScroll({
        autoScrollingMode: "",
        autoScrollingDirection: "endlessLoopRight",
        touchScrolling: true
      });

    }

  });