rexblack / jquery-imageformat

This plugin let's you dynamically assign different formats to lazy loaded images dependent on screen resolution

jquery-imageformat

This plugin let's you dynamically assign different urls to lazy loaded images dependent on screen resolution

Basic Usage

Define image-urls for different formats:

<img class="lazy" 
  data-src-large="images/1200px-ESO-VLT-Laser-phot-33a-07.jpg"
  data-src-medium="images/640px-ESO-VLT-Laser-phot-33a-07.jpg" 
  data-src-small="images/218px-ESO-VLT-Laser-phot-33a-07.jpg"/>

You may choose from the following predefined resolutions:

small	medium	large	big
320x520	768x1024	1680x1050	1920x1050

Call the plugin-method on the element:

$(function() {
  $('img.lazy').imageformat();
});

By default, the client format's url is copied to the src-attribute which will start loading the image. Read ahead to find out, how to use a different attribute and integrate with jquery-lazyload.

Advanced Usage

Using a custom attribute

$(function() {
  $('img.lazy').imageformat({
    attribute: 'data-original'
  }).lazyload();
});

Register a custom format

$.fn.imageformat.setImageFormat('my-format', 1280, 990);

Options

options.attribute

Type: String Default value: src

Name of the attribute the client format's corresponding url is copied to. Defaults to src.