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

  • Resolved silvadiego705

    (@silvadiego705)


    5 years, 5 months ago

    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 5 years, 5 months ago by silvadiego705.
Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Support lizkarkoski

    (@lizkarkoski)

    Howdy –

    At the moment, we don’t support any hooks into jetpack-lazy-loaded-image

    Thread Starter silvadiego705

    (@silvadiego705)

    Howdy –

    I’m talking about a JavaScript trigger, not a WordPress PHP action hook. Please open the “/jetpack/modules/lazy-images/js/lazy-images.js” file and look for the following line:

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

    I want to write a “third-party code that performs actions after an image is loaded”, as mentioned in the comment.

    Thread Starter silvadiego705

    (@silvadiego705)

    Actually I need to create a “mouseover” event over an image, but that doesn’t work because the original image is replaced with a clone. By default the cloned objects don’t copy the event handlers (see jQuery clone()), so the “mouseover” event disappears.

    Then I found the “jetpack-lazy-loaded-image” trigger that theoretically could’ve helped me. But that line turns out to be just dead code.

    Plugin Contributor James Huff

    (@macmanx)

    Sorry, to be a bit more clear, custom code is beyond the scope of what we can support here.

    If you need someone to build that for you, we recommend hiring someone from https://jetpack.pro/

    You’re also welcome to ask via https://jetpack.com/contact-support/?rel=support though I suspect the answer may be the same.

    Actually there is a way to do this.

    jQuery(".jetpack-lazy-image").on("load", function() {
    //do whatever you want.
    jQuery(this).on("click",function() {});
});
    • This reply was modified 5 years, 1 month ago by husbandman.
Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘The ‘jetpack-lazy-loaded-image’ JS event can never be used’ is closed to new replies.