The Lens template system fires several custom JavaScript events during different phases of the page loading process. Theme authors may bind JavaScript listeners to these events to provide additional functionality or to adjust their layouts when necessary.

k-resize

The k-resize fires after the standard window resize event fires, and after all Koken resize functions have processed. This event is particularly useful if your theme takes advantage of responsive media, as it fires after Koken has updated the responsive media sizes and source files.

k-image-loaded

The k-image-loaded event detects when lazy loaded images have loaded and fully faded in. This applies when the <koken:img> template tag has both lazy="true" and fade="true" assigned.

k-infinite-loading

The k-infinite-loading event fires when koken:load is set to infinitely load and begins loading the next set of items. This event is useful for showing a loading indicator while the next set of items are retrieved from the server.

k-infinite-loaded

The k-infinite-loaded event fires when koken:load is set to infinitely load and the loading of the next set of items is complete. Typically used in conjunction with k-infinite-loading to hide any progress loading indicator that was shown when loading began.

Example

Listening for an event is easy inside of Lens templates. jQuery is included by default, so we recommend using the $.on method to listen for events:

​<script>
    $(window).on('k-resize', function() {
        console.log('k-resize event has fired!')
    });
</script>