The ‘jetpack-lazy-loaded-image’ JS event can never be used

In the “/jetpack/modules/lazy-images/js/lazy-images.js” file, “applyImage” function: the image is first cloned, the clone is modified and then the original image is replaced with the clone.

At the end of the function is written:

// Fire an event so that third-party code can perform actions after an image is loaded.
theClone.trigger( 'jetpack-lazy-loaded-image' );

I’ve tried hooking on this event as follows:

jQuery('.jetpack-lazy-image').on('jetpack-lazy-loaded-image', function() {
   console.log('the jetpack-lazy-loaded-image trigger fires');
});

but it doesn’t work and it cannot possibly work because the ‘jetpack-lazy-loaded-image’ trigger is fired on an image clone that springs into existence only a fraction of a second before the trigger fires.

Could you please explain me how to hook into the ‘jetpack-lazy-loaded-image’ event?

Moreover, a quick research into other Lazy Load plugins (like Lazy Load by WP Rocket, Lazy Loader or a3 Lazy Load) shows that normally the image’s attributes are replaced within the existing image without the need of a clone. The use of a clone seems to only complicate things a little bit, as no jQuery event can be attached to an image. For example, the following examples will not work:

jQuery('.jetpack-lazy-image').on('mouseenter', function() {
   console.log('do something on mouseenter over the image')
});
  
jQuery('.jetpack-lazy-image').on('click', function() {
    console.log('do something on click on the image')
});

I wanted to execute some JS function on an image “click” event, but I don’t manage to use neither the “click” trigger on the image, nor the “jetpack-lazy-loaded-image” trigger to bind the “click” trigger on the cloned image.

• This topic was modified 4 years, 10 months ago by silvadiego705.