In #8879 it was reported that outdented images were broken in cases where the CSS class was applied after the initial page loading. In TwentySixteen, this seems to be because when the initial 1x1 image loads, it wasn't meeting the condition that it be below the entry meta content.

The first part of a fix here is to fire an event when we lazy load an image, which will allow themes and plugins to better integrate with Lazy Images.

I wasn't able to reproduce the multiple network requests that @PatTheMav reported in that issue. Based on his testing though, it seems possible that the issue was because we were calling image.setAttribute() on the image in the dom. What I've tried to do in this PR is to clone the original image, update the attributes, and THEN replace the original image with the new one. I hope this fixes the issue. 🤞

To test:

• Checkout branch
• Ensure lazy images is turned on
• Create a post with several paragraphs and images
• In console add the following:

  jQuery( document.body ).on( 'jetpack-lazy-loaded-image', function( e ) {
  	console.log( e.target );
  } );

• Ensure that images load as you scroll and that the images get logged in the console
• Test the above in TwentySixteen and ensure that images are outdented after they are lazy loaded.

Here's an example of an outdented image in TwentySixteen:

Here's the same image not outdented: