Image Loader Plugin

The image loader plugin handles the lazy loading of the images as well as centering on resize when specified.

HTML Attributes

Name Type Required Default Description
data-src String yes '' This data attribute defines the url of the image to load
data-resize Boolean no false This data attribute defines if the image will be cropped and centered; you must defined the width and the height of the div [data-aau="imageloader"]
data-alt String recommended '' This data attribute defines the alt attribute for the image

Usage with HTML attribute

<div data-aau="imageloader" data-src="image.jpg" data-resize="true" data-alt="some description"></div>

Usage with Javascript

(function($){
  $('#image').imageloader();
})(jQuery);
Full Width Images Tall

1400x600px on desktop (recommended size for upload)
400px height on tablet
200px height on mobile

<div class="full-size" data-aau="imageloader" data-resize="true" data-alt="Image description" data-src="../../vendors/docs/images/hero.jpg">
</div>
Full Width Images Short

1400x400px on desktop (recommended size for upload)
300px height on tablet
200px height on mobile

<div class="full-width short" data-aau="imageloader"  data-alt="Image description" data-resize="true" data-src="../../vendors/docs/images/hero.jpg">
</div>
12 Column Images

960x600 on desktop (recommended size for upload)
720x450 on tablet
100% width on mobile

8 Column Images

636x398 on desktop (recommended size for upload)
476x298 on tablet
100% width on mobile

6 Column Images

474x296 on desktop (recommended size for upload)
354x221 on tablet
100% width on mobile

4 Column Images

312x195 on desktop (recommended size for upload)
232x145 on tablet
100% width on mobile

3 Column Images

231x144 on desktop (recommended size for upload)
171x107 on tablet
25% on mobile

2 Column Images

square ratio
150x150 on desktop (recommended size for upload)
110x110 on tablet
25% on mobile

1 Column Images

square ratio
69x69 on desktop (recommended size for upload)
49x49 on tablet
25% on mobile

Sign In