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

Popular posts from this blog

Why does Ruby on Rails generate add a blank line to the end of a file? -

keyboard - Smiles and long press feature in Android -

node.js - Bad Request - node js ajax post -