jquery - How to do lazy loading with BXSlider -
i using image gallery using bxslider. having more 15 images in slide taking lot of time load. need load images in each slider 1 one when particular slide appears. got example here lazyload , bxslider uses lazyload load images. not working me. can 1 me this?
im using code
$(document).ready(function(){ $("#morelessons").bxslider( { startingslide:1, pager: false }); // trigger lazy load new in-slided images $("a.bx-prev, a.bx-next").bind("click", function() { // call lazy loading settimeout(function() { $(window).trigger("scroll"); }, 100); }); });
you can 'trick' browser move 1 px adding:
$(window).scrolltop($(window).scrolltop()+1); fire on a.bx-prev , a.bx-next
can set:
$(window).scrolltop($(window).scrolltop()-1); fire after events called.
if slideshow 50 images not have scrolled down page 50px end.
this method work bxslider in drupal 7 addition of lazyload module. enable lazyload, set loading icon 'none' , add above javascript calls callback section of bxslider settings in view. voila! go ahead , put hi-rez images in there like.
Comments
Post a Comment