Responsive lazy loader demo

The breakpoints used on that demo :

'phone'                 : "(max-width: 380px)",
'tablet'                : "(min-width: 381px) and (max-width: 991px)",
'phone-retina'          : "(max-width: 380px) and (-webkit-min-device-pixel-ratio: 2), (max-width: 380px) and (min-resolution: 192dpi), (max-width: 380px) and (min-resolution: 2dppx)",
'tablet-retina'         : "(min-width: 381px) and (max-width: 991px) and (-webkit-min-device-pixel-ratio: 2), (min-width: 381px) and (max-width: 991px) and (min-resolution: 192dpi), (min-width: 381px) and (max-width: 991px) and (min-resolution: 2dppx)",
'desktop'               : "(min-width: 992px) and (max-width: 1200px)"

Override data-src example

Previous example using attributes to override images by a new one in some cases.

Alway use the same image for the "col-md-8" display.

Override image on "tablet" breakpoint but use the global lazyloader configuration on the new image according to display & breakpoint.

Override image on "default" display & "desktop" breakpoint but use the global lazyloader configuration on the new image according to display & breakpoint.