jji

jquery.jit-image

This jQuery plugin facilitates the use of jit image manipulation on the server and medias queries

Showing:

Popularity

Downloads/wk

3

Maintenance

No Maintenance Data Available

Package

Dependencies

0

License

MIT

Type Definitions

Tree-Shakeable

No?

Readme

jQuery JIT image Built with Grunt npm version David DM

This is our response to "responsive images"

Now downloads retina image ready by default

This jQuery plug-in facilitates the use of jit (just in time) image manipulation on the server with medias queries. By default, the plug-in uses the image's parent size for reference, but this can be customized via the data-container attribute.

Instances only need to be registered once and they will get updated the the window resizes, if needed.

It also has two ways of dealing with the resize: it can change the src attribute of all the elements at once or can serialize the change, and hence, the download. By default, it uses the first method, but delays elements that are not visible (1 sec delay, nonVisibleDelay option). But if you set the parallelLoadingLimit` to a value greater than one, the plug-in will make sure that not more than this much download are running in parallel. But beware when mixing different values of this parameter since the limit is checked in a per element manner.

Usage

  • With the default data attribute data-src-format:
<div id="img-container">
    <img src="..." data-src-format="/jit/{$w}/{$h}/path/to/image.jpg" alt="" />
</div>

The plug-in with automatically call it self on the DOM node with the right data attribute. The container option call also be set via the data-container attribute.

  • Manually via script:
// Default options
$('img.resize').jitImage();

// Custom data attribute
$('img[data-format]').jitImage({
    dataAttribute: 'data-format'
});

Options

Possible options and their default values.

{
    container: null, // the reference element for the size, jQuery, DOM or selector
    dataAttribute: 'data-src-format', // can also be function
    defaultSelector: 'img[data-src-format]',
    containerDataAttribute: 'data-container', // reference container, by default, the parent. Can also be function
    widthPattern: /\$w/i, // regexp to identify the width pattern
    heightPattern: /\$h/i, // regexp to identify the height pattern
    eventTimeout: 50, // the timer for event dispatching
    load: function (size) {}, // image loaded callback. Raises the 'loaded.jitImage' too.
    nonVisibleDelay: 1000,  // delay resizing of non-visible images when parallelLoadingLimit = 0
    forceCssResize: true, // change the css properties of the image as well
    parallelLoadingLimit: 0, // limit the number of concurrent requests (0 = disabled)
    format: null, // function (urlFormat, o, size)
    bypassDefaultFormat: false,
    updated: null, // function (urlFormat, o, size)
    forceEvenSize: false, // force size to use even numbers
    useDevicePixelRatio: true, // uses dpr when formatting urls ("retina image")
    fetchSmallerImages: true // set to true if you want to fetch new smaller images when the viewport shrinks
    aborted: null // function (urlFormat, o, size)
}

Global default options are also available an can be set using global variables. This allows modification of the values before the script is event loaded.

window.jitImageSelector default selector for the auto load image.

window.jitImageDataAttribute the data attribute to look for the image format.

You can also changes all default values on a global level after the script is loaded with the $.jitImage.defaults object.

License

MIT Licensed. See LICENSE.txt or http://deuxhuithuit.mit-license.org
(c) Deux Huit Huit

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
No reviews found
Be the first to rate

Tutorials

No tutorials found
Add a tutorial