• Resolved KZeni

    (@kzeni)


    It appears enabling Jetpack’s Photon / WP.com Image CDN functionality also triggers devicepx JS (http://s0.wp.com/wp-content/js/devicepx-jetpack.js) to be included on the site’s pages. This then creates a problem for a3 Lazy Load per this script resulting in the srcset value for images to be populated with the placeholder/loading image used by a3 Lazy Load instead of the actual image asset(s).

    The problem is then surfaced when using a high-dpi/retina screen or anything else that otherwise has the browser looking at the srcset value instead of the src for the img element (src being accounted for properly to use the actual asset, but srcset is used by the browser instead based on the srcset value[s]).

    – Summary of Issue –
    In short, enabling the image CDN from Jetpack has devicepx JS included which incorrectly grabs the placeholder/loading image for the srcset value on the images and then a3 Lazy Load then doesn’t account for that fact so the placeholder/loading image is simply never switched away from since that asset is still what’s present as the srcset value which the browser sees as what’s supposed to be used.

    – Workaround –
    My current workaround was to add this to the site’s functions.php file (I happened to place it alongside where the other scripts for the theme are being enqueued, but I imagine it could be implemented elsewhere):

    
    // Disable Jetpack's devicepx (has a conflict with a3 Lazy Load [retains the placeholder as the higher-dpi image asset)
    wp_dequeue_script( 'devicepx' );
    

    – Possible Solution –
    I’m wondering if a3 Lazy Load could have this code above be automatically toggled based on whether lazy loading of images has been enabled or not to prevent this conflict (I’m thinking it’s better to have it not break & simply miss out on devicepx behavior.) That way, a conflict with a very popular plugin can be avoided without needing people to manually troubleshoot the issue and eventually implement their own workaround. That said, I’m certain there are other options to be considered here as possible solutions to this problem.

    I would imagine one should be able to use Jetpack (a very popular plugin) to take advantage of the image CDN it provides without it then breaking a3 Lazy Load’s images on devices which utilize srcset on image elements.

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Author Steve Truman

    (@a3rev)

    Hey @kzeni

    Thank you for this conflict report – now that WP 5.3 is in the wild we should have some time in the coming weeks to look at this – I see that you have created a Feature Request issue on the a3 Lazy Load Github Repo back in May that I thought was really interesting, but with learning and working on Gutenberg blocks development we have focused just on maintenance rather than further development.

    If you would like to create this as new issue on the repo that would be great. As you as showing you have an interest in a3 Lazy Load and as you are a developer – would be very good if you’d like to also contribute (which you are doing now by posting this, and I thank you for that) to the plugin core development.

    Thanks again – Steve

    Thread Starter KZeni

    (@kzeni)

    Thanks for the prompt response, and I totally get where you’re coming from!

    I’ve gone ahead and posted this on GitHub here: https://github.com/a3rev/a3-lazy-load/issues/34

    The fact that this is on GitHub definitely opens this up for me to taking a look at this when I have time as well, and I’ll definitely contribute with any findings or anything I come up with.

    As an aside, I know Jetpack has its own lazy loading feature now, but I’d like to keep using a3 Lazy Load since this also accommodates iframes, video, etc. which Jetpack’s implementation is currently lacking (among other customizations, functionality, etc.)

    I’ve also cross-posted this for Jetpack to potentially take a look at via: https://wordpress.org/support/topic/photon-image-cdn-features-devicepx-javascript-has-conflict-with-a3-lazy-load/ (I imagine whomever fixes the conflict first is the best result for all while having both resolve the conflict would be harmless & potentially resolve other possible conflicts.)

    Plugin Author Steve Truman

    (@a3rev)

    Jetpack Site Accelerator(Proton) CDN images compatibility added in version 2.0.0. Reference #34

    Props @kzeni for the compatibility patch.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Conflict with Jetpack’s Photon/WP.com Image CDN feature’s devicepx JavaScript’ is closed to new replies.