Responsive Images Js Plugin

This document will only cover jquery.responsiveimages plugin. Apply to Bootstrap Package >= 6.2.13

Responsive images Plugin

This plugin manages lazy loading of images, via data-attributes, using advanced techniques to detect viewport width matching exact media query. Highly optimized so it only performs things when really needed. Since 6.2.13 the plugin auto-initializes so there is no more need to do it by hand in main.js.

Using jquery selector

For performance reason, selection is cached so any update by hand should always be made using “img.lazyload” selector, not doing so will break up things.

Preloading images

You may want to “lazy-preload” off screen images. Images preloading is done by adding a data-preload=”true” attribute on image. This way the plugin doesn’t take care of screen position nor image visibility and loads the image right after document.ready.

Changing default breakpoints

When changing default breakpoints, you have to modify the settings of jquery.responsiveimages.min.js (see jquery.responsiveimages.js line 22-30).

Javascript

1
2
3
4
5
6
7
8
ViewPort.DEFAULTS = {
        breakpoints : {
                480: 'small',
                768: 'medium',
                992: 'large',
                1200: 'bigger'
        }
}

Update images by hand

Sometimes images are hidden and you may want to call the plugin by hand. eg: when carousel slide and when a tab show.

Javascript

1
2
3
$(".carousel").on("slid.bs", function(event){
        $("img.lazyload").responsiveimage('unveil');
});

Perform an action when new images are loaded

As the layout of your page may change on image load, you may want to call a function when this happen, eg: update a scrollspy. The ‘loaded.bk2k.responsiveimage’ event is meant to be catched with a setTimeout based handler since many calls are possible, this way makes a kind of throttle.

Javascript

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
var loadedTimeout;
$(window).on('loaded.bk2k.responsiveimage', function(){
        clearTimeout(loadedTimeout);
        loadedTimeout = setTimeout(
                function(){
                        // whatever you want to do
                        refreshScrollSpy();
                },
                200
        );
});