javascript - How do I integrate lazyload & bxslider together? -

-

i want lazily load images in bxslider (or slider control, allows dynamic number of slides/images). i'm using lazyload loading images lazily, images in slider isn't loading lazily. images getting loaded pages :|. here code,

<link href="jquery.bxslider.css" rel="stylesheet" />     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>     <script src="jquery.bxslider.js"></script>     <script src="jquery.lazyload.js"></script>     <script type="text/javascript" charset="utf-8">     $(function() {      $(":not(#hcontainer) img.lazy").lazyload({         effect: "fadein"       });        $("img.lazy").lazyload({         effect: "fadein",         container: $("#hcontainer")       });      $('.bxslider').bxslider({       minslides: 1,       maxslides: 3,       slidewidth: 170,       slidemargin: 10,       pager: true     });      });       </script>      <style type="text/css">     #hcontainer {         height: 250px;         overflow: hidden;     }     #inner_container {           width: 900px;         }     </style>        <div id="vcontainer">       <div id="hcontainer">         <div id="inner_container">     <ul class="bxslider">           <li><img class="lazy" src="1.jpg" data-original="1.jpg" alt="bmw m1 hood"></li>        <li>      <img class="lazy" src="2.jpg" data-original="2.jpg" alt="bmw m1 side"></li>         <li>  <img class="lazy" src="3.jpg" data-original="3.jpg"  alt="viper 1"></li>         <li>  <img class="lazy" src="4.jpg" data-original="4.jpg" alt="viper corner"></li>         <li>  <img class="lazy" src="5.jpg" data-original="5.jpg" alt="bmw m3 gt"></li>         <li>  <img class="lazy" src="6.jpg" data-original="6.jpg" alt="corvette pitstop"></li>     </ul>          </div>       </div>       <br/>       <img class="lazy img-responsive" data-original="2.jpg" width="465" height="574" alt="bmw m1 side">       <br/>       <img class="lazy img-responsive" data-original="3.jpg" width="465" height="574" alt="viper 1">       <br/>       <img class="lazy img-responsive" data-original="4.jpg" width="465" height="574" alt="viper corner">       <br/>       <img class="lazy img-responsive" data-original="5.jpg" width="465" height="574" alt="bmw m3 gt">       <br/>       <img class="lazy img-responsive" data-original="6.jpg" width="465" height="574" alt="corvette pitstop">       <br/>     </div>

what doing wrong?

p.s. i'm open use other slider control, if supports lazyloading.

i suggest, try lazysizes. lazysizes automatically detects visibility changes, won't need write js code integrate slider.

everything need replace src data-src, add class lazyload images , add lazysizes script page.

<img data-src="image.jpg" class="lazyload" />

here examples:

and in case want force preload image, add class lazypreload.


Comments

Post a Comment

Popular posts from this blog

yii2 - Yii 2 Running a Cron in the basic template -

-
i have seen instructions on running cron in advanced template, cant figure out how on basic template. have following controller in basic controllers folder. <?php namespace app\controllers; use yii\console\controller; /** * cron controller */ class croncontroller extends controller { public function actionindex() { echo "cron service runnning"; } public function actionmail($to) { echo "sending mail " . $to; } } i have navigated root of application , tried these comands yii cron php yii cron im getting unknown comand "cron" i know old question failed find actual answer this. if @ code yii exec file you'll notice requires /common/config/aliases.php file console/config/main.php. can naturally change these or copy on these advanced template. hope solves problem wanting same thing.
Read more

asp.net - 'System.Web.HttpContext' does not contain a definition for 'GetOwinContext' Mystery -

-
i realize question might seem trivial some, it's these types of things find myself fighting quite bit , want make sense of despite seeming losing battle in .net (for me anyway). so, if following: using system.web; ... applicationuser user = system.web.httpcontext.getowincontext().getusermanager<applicationusermanager>().findbyid(system.web.httpcontext.user.identity.getuserid()); that produces error in title , red getowincontext() , error cannot resolve symbol 'getowincontext()' however, if following (remove system.web in front of httpcontext ), works expected (or @ least no errors): using system.web; ... applicationuser user = httpcontext.getowincontext().getusermanager<applicationusermanager>().findbyid(system.web.httpcontext.user.identity.getuserid()); however, if (same line that's working using system.web commented out): //using system.web; ... applicationuser user = httpcontext.getowincontext().getusermana...
Read more

mercurial graft feature, can it copy? -

-
there new feature in mercurial 3, called 'graft' (graft local). job of moving change-set different branch. is there way "copy" change-set branch? i interested in in moving stuff qa branch production branch, still need code reside in qa. want copy. found , have tried few things, maybe it'll become clear more tinkering , reading... does have better way of 'cherry picking' change-sets move cross branch (or trunk)??? graft copies changesets, doesn't move them. hg graft (emphasis mine): this command uses mercurial's merge logic copy individual changes other branches without merging branches in history graph. known 'backporting' or 'cherry-picking' . default, graft copy user, date, , description source changesets.
Read more