jquery - Lazyloading picture elements -

-

i'm looking recommendations on how best lazyload picture elements. may use small jquery helper function determine whether picture "on screen". lazy fetching of srcset, i'm not sure right how that. so, ideas?

here's example of picture elements working with. thanks!

<picture alt="random celebrities" data-src="http://www.example.com/r/c_1,h_478,w_478/2015/03/19/random-celebrities-08-560x560.jpg">     <!--[if ie 9]><video style="display: none;"><![endif]-->     <source class='picture-source-1260' srcset='http://www.example.com/r/c_1,h_239,w_239/2015/03/19/random-celebrities-08-560x560.jpg, http://www.example.com/r/c_1,h_478,w_478/2015/03/19/random-celebrities-08-560x560.jpg 2x' media='(min-width: 1260px)'>     <source class='picture-source-960' srcset='http://www.example.com/r/c_1,h_180,w_180/2015/03/19/random-celebrities-08-560x560.jpg, http://www.example.com/r/c_1,h_360,w_360/2015/03/19/random-celebrities-08-560x560.jpg 2x' media='(min-width: 960px)'>     <source class='picture-source-760' srcset='http://www.example.com/r/c_1,h_150,w_150/2015/03/19/random-celebrities-08-560x560.jpg, http://www.example.com/r/c_1,h_300,w_300/2015/03/19/random-celebrities-08-560x560.jpg 2x' media='(min-width: 760px)'>     <source class='picture-source-450' srcset='http://www.example.com/r/c_1,h_210,w_210/2015/03/19/random-celebrities-08-560x560.jpg, http://www.example.com/r/c_1,h_420,w_420/2015/03/19/random-celebrities-08-560x560.jpg 2x' media='(min-width: 450px)'>     <source class='picture-source-320' srcset='http://www.example.com/r/c_1,h_160,w_160/2015/03/19/random-celebrities-08-560x560.jpg, http://www.example.com/r/c_1,h_320,w_320/2015/03/19/random-celebrities-08-560x560.jpg 2x'>     <!--[if ie 9]></video><![endif]-->     <noscript>         <img class="picture-img-noscript" src="http://www.example.com/r/c_1,h_160,w_160/2015/03/19/random-celebrities-08-560x560.jpg" alt="random celebrities" />     </noscript>     <img class="picture-img" srcset="http://www.example.com/r/c_1,h_160,w_160/2015/03/19/random-celebrities-08-560x560.jpg" alt="random celebrities" /> </picture>

use lazysizes, high performance lazyloader normal , responsive images (including picture element).


Comments

Post a Comment

Popular posts from this blog

ubuntu - How to disable Kernel Module Signing in linux -

-
i'm working real time scheduler developed @ university , when run "module verification failed: signature and/or required key missing - tainting kernel". i've learned might because of kernel module signing. possible dissable on ubuntu? i'm using ubuntu vmplayer. module signing enabled within kernel configuration file starting kernel version 3.7, can disable running make menuconfig within kernel source directory , deselecting module signature verification option within enable loadable kernel module menu option. after have recompile kernel.
Read more

java - Ebean enhancement ignores a model -

-
we using avaje-agentloader enhance our ebeans. ebeans in same package. including loader, agent & base ebean library in our project (via sbt): "org.avaje" % "avaje-agentloader" % "1.1.2", "org.avaje.ebeanorm" % "avaje-ebeanorm" % "4.5.5", "org.avaje.ebeanorm" % "avaje-ebeanorm-agent" % "4.5.2", however, when loader runs enhancement, skips 1 ebean. each ebean annotated @entity , extends com.avaje.ebean.model . there seem no differences between ones enhanced , 1 not. there no includes, or extends, etc. basically, i'm wondering if has run across issue in past, or has insights. things we've tried: specifying actual classes enhanced via serverconfig.setclasses(...) specifying pakages analyse/enhance via serverconfig.addpackage(...) or setpackages(...) not specifying @ , having loader analyse all. we've set break-point @ transformer.transform , bean in questio...
Read more

How to combine associative arrays in bash? -

-
does know of elegant way combine 2 associative arrays in bash normal array? here's i'm talking about: in bash can combine 2 normal arrays follows: declare -ar array1=( 5 10 15 ) declare -ar array2=( 20 25 30 ) declare -ar array_both=( ${array1[@]} ${array2[@]} ) item in ${array_both[@]}; echo "item: ${item}" done i want same thing 2 associative arrays, following code not work: declare -ar array1=( [5]=true [10]=true [15]=true ) declare -ar array2=( [20]=true [25]=true [30]=true ) declare -ar array_both=( ${array1[@]} ${array2[@]} ) key in ${!array_both[@]}; echo "array_both[${key}]=${array_both[${key}]}" done it gives following error: ./associative_arrays.sh: line 3: array_both: true: must use subscript when assigning associative array the following work-around came with: declare -ar array1=( [5]=true [10]=true [15]=true ) declare -ar array2=( [20]=true [25]=true [30]=true ) declare -a array_both=() key in ${!array1[@]}; ...
Read more