Conflict with Jetpack’s Photon/WP.com Image CDN feature’s devicepx JavaScript

[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.

As an aside, this has also been posted at https://wordpress.org/support/topic/conflict-with-jetpacks-photon-wp-com-image-cdn-features-devicepx-javascript/ for cross-reference/visibility.

[alextuan]

@KZeni have merged your code to plugin , thanks