AB-interchange

Demonstration page, details on GitHub

AB-interchange is a small, vanilla script to:

  • lazy load images and background-images
  • give responsiveness to background-images
  • give responsiveness to images on IE 10 and 11

Informations

AB-mediaQuery is initilized with:


AB.plugins.mediaQuery({
  bp: {
    smallOnly:  'screen and (max-width: 767px)',
    mediumOnly: 'screen and (min-width: 768px) and (max-width: 1024px)',
    medium:     'screen and (min-width: 768px)',
    largeOnly:  'screen and (min-width: 1025px) and (max-width: 1280px)',
    large:      'screen and (min-width: 1025px)'
  }
});
        

AB-interchange is initilized with:


AB.plugins.interchange({
  lazySettings: {
    offscreen: 1,
    delayed:   false,
    layout:    'fluid' // can be "fixed" to fixed dimensions (not fluid)
  }
});
        

Example

Responsive lazy background-image


Responsive lazy image


Responsive image (totally useless and soon deprecated!)

description
description
description
description
description
description
description
description
description

Responsive picture (totally useless and soon deprecated!)

description
description
description
description
description
description
description
description
description