Skip to content
loading different versions of images based on venue, lazy load and all that
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.project
README.md
bower.json
package.json
pickyImg.css
pickyImg.js
pickyImg.less
pickyImg.min.css
pickyImg.min.js

README.md

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.

markup :

  • some element with data-src-... options.
    • must at least specify a data-src-default
  • 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
  • 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
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.