What is an event?

Events are certain moments in the plugin execution time, such as when the plugin is loaded.

The load event

The load event is triggered when the element is loaded, meaning all the images are fully visible and loaded in the browser cache. Until the background is loaded, a loading spinner is displayed.

To add a function to the load event, we will use the following event handler:

$('.imagine').on('imagine.load', function (event) {
  console.log('Imagine has been loaded.')
});

The parallax event

The parallax event occurs when the scroll action happens. You can add custom functionality to the plugin by having access to the current progress, delta and delta progress variables.

To add a function to the parallax event, we will use the following event handler.

$('.imagine').on('imagine.parallax', function (event, progress, delta, deltaProgress) {
  console.log(
      'Imagine progress: ' + progress,
      'Imagine delta: ' + delta,
      'Imagine deltaProgress: ' + deltaProgress
  );
});

The visible event

The visible event occurs when an element’s visibility status changes. Imagine will switch between the imagine-visible and imagine-hidden classes to specify whether the element is visible or not.

To add a function to the visible event, we will use the following event handler.

$('.imagine').on('imagine.visible', function (event, inView) {
  console.log(
      'Imagine visibility: ' + inView
  );
});