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>