Flying-Blue live v0.0.13 M

Responsive Image

Use native images, lazy containers or simply the API to get the best available image for the client side. Always make sure to use the right aspect ratio so your site will not reflow.

Alternative content...

Native image setup

The parent container will be the image wrapper. You need to give this the image ratio css class as well (all available ratio's are defined in our master css).

<p class="fb-img-reset-me-container fb-img-ratio-3-2">
  <img src="// " title="FB" class="js-fb-img fb-img-native" data-img-type="native" srcset="// 480w, // 1x, // 480w 2x, // 768w 2x, // 2x">

Lazy image

You can also lazy load an image. When giving the data attribute 'data-img-type' the value 'lazy' it will only load the correct image when the container is in viewport of the user. If not, it will always load the correct image. You can optionally have alternative content in the container. As soon as JavaScript kicks in it will be replaced.

  <span data-srcset=" 480w, 768w, 1x, 480w 2x, 2x" class="js-fb-img fb-img-lazy fb-img-ratio-16-9" data-img-type="lazy"></span>


You can start the module by requiring it and give it the container the images are in (or leave it blank so module will look in whole document), and overrule the threshold for loading lazy images.

  require(["fb/img-responsive"], function ($Image) {
    $Image.init({container: '#docs-img-example', threshold: 300});

After initiated you can use:

$image.crawl({container: 'selector-view'}); when you added new containers.
$image.clean({container: 'selector-view-you-want-to-be-cleaned'}); to clean up (when SPA no detached state will be there).
var img = $image.html('//foo.png 480w, //bar.png 768w, //shizzle.png 1x', 'dummy-class'); to give you the right image html tag (when you need it in your _.template and don't want to crawl for it).