pickyImg
For loading different versions of images based on venue, lazy loading and all that. By default, it uses UAjammer's venue attribute to decide which src to load - not window width. BUT you can override that and roll your own logic if you like.
setup :
- requires: jQuery, UAjammer
- UAjammer necessary to determine venue - unless you pass your own logic for venue -> data-src mapping -OR- pass
whichSrc
as an arg. - see 'SRC Logic' below for more details.
- UAjammer necessary to determine venue - unless you pass your own logic for venue -> data-src mapping -OR- pass
markup :
- some element with
data-src-...
options.- must at least specify a
data-src-default
- must at least specify a
- wrap should contain a noscript tag with the default image in it.
- something like this :
<div class="_picky" data-class="classes-to-be-applied-to-loaded-image"
data-src-default="path/to/default.jpg"
... other data-srcs here ... >
<noscript><img src="path/to/default.jpg" /></noscript>
</div>
- for responsive/liquid images :
- you'll need some css (see 'fancy' below')
- reccommend you use the padding-top method
- example 4/3 image :
<div class="_picky" style="padding-top:75%;"
... >
<noscript><img src="path/to/default_4_3.jpg" /></noscript>
</div>
usage :
- regular style :
_pickyImg.init()
- if you want to force a pick :
_pickyImg.pickMe(dummy, which_src, force)
customization :
- optional args for
init()
:
var args = { // all of these are optional...
selector : '._picky', // selector to use for bindings, defaults to '._picky' ...
pad : 0, // defaults to window height... *
whichSrc : 'src-to-use', // defaults to choosing based on UAjammer venue ** -OR- 'data-src-default' when no UAjammer is present...
srcMap : function(){...}, // must return the 'data-src' attribute to use, defaults to using UAjammer and default logic ** ...
bindMe : true, // use defualt binding, defaults to true *** ...
callbacks : {...} // you can pass funtions for certain callbacks **** ...
};
_pickyImg.init(args);
fancy :
- use the included css to things like spinners, slick fade-ins and whatnot,
- OR - roll your own using the reserved classes :
_picky_picking
_picky_picked
- you want to load into a background-image?
- ok - just give your picky element the
_picky_bg
class
- ok - just give your picky element the
* padding :
- This is for when to consider an element 'in-view' - i.e. when to load the src.
- Applied both above and below the element's position.
- Defaults to 1 window height.
** SRC Logic :
- this is responsible for choosing the right image src to load - and sets the
whichSrc
var - default logic is based on UAjammer venue :
whichSrc : function() {
var chosenSrc = whichSrc;
switch(true) {
case(UA.Venue == 'phone'):
chosenSrc = UA.Pixels >= 2 ? 'src-phonex2' : 'src-phone';
break;
case(UA.Venue == 'tablet'):
chosenSrc = UA.Pixels >= 2 ? 'src-tabletx2' : 'src-tablet';
break;
case(UA.Venue == 'desktop'):
chosenSrc = UA.Pixels >= 2 ? 'src-desktopx2' : 'src-desktop';
break;
}
return chosenSrc;
}
*** default binding :
- Ceates a more efficient event (wStopped) to detect window scroll and resize (both of which fire more then we need). The wStopped event is triggered 150ms after a user has stopped scrolling/resizing the window. This results in smoother scrolling and possibly less power consumption.
- When wStopped is triggered, picky images that haven't been loaded and are in-view ttry to load their whichSrc.
**** Callbacks :
- callbacks can be passed in the args as an object -i.e. :
var args = { // optional...
callbacks : {
init : function(){...}, // fires after args are processed on init() ...
finishedInit : function(){...}, // fires at end of init() ...
picking : function(){...}, // fires just before picking - which defaults to the custom event of wStopped *** ...
finished : function(){...} // fires when there are no more un-picked images ...
}
};
_pickyImg.init(args);
to do :
- option for image reload in window resize (like get larger/smaller versions)?
- no scroll events for opera mini - so we'll need a solution for that
- revisit requirements