Compatibility with images lazy loading

[keoshi]

Would love to get this working with some sort of image lazy loading solution. Unfortunately, it's not working for me (currently using lazysizes).

To give a little bit more context:

• Page loads with the placeholders in place (base64 encoded 1x1 pixel image).
• Lazy load happens on images that come into view.
• When lazy loaded images clicked, there's a jump in the page, zoom occurs instantly (no transition), and the image then slides into place vertically. Seems like the DOM container where the image was is collapsed for half a second.

Here's a gif that illustrates the issue: first the lazy loaded image, then one fetched on page load.

This is what the image tag looks like:

<img class="lazyload size-full" src="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNgkAQAABwAGkn5GOoAAAAASUVORK5CYII=" data-src="http://assets.mutelife.com/wp-content/uploads/2016/01/happy-new-year-berlin-01@2x.jpg" alt="Berlin" width="2280" height="1521" data-action="zoom" />

When loaded, the markup looks like this:

<img class="size-full lazyloaded" src="http://assets.mutelife.com/wp-content/uploads/2016/01/happy-new-year-berlin-01@2x.jpg" data-src="http://assets.mutelife.com/wp-content/uploads/2016/01/happy-new-year-berlin-01@2x.jpg" alt="Berlin" width="2280" height="1521" data-action="zoom">

This is what an imaged loaded on page init image looks like:

<img class="size-full" src="http://assets.mutelife.com/wp-content/uploads/2016/01/happy-new-year-berlin-01@2x.jpg" alt="Berlin" width="2280" height="1521" data-action="zoom">

In the DOM they all have width/height attributes — what could be at fault here, any suggestions?

Thanks in advance!

[keoshi]

Related discussion here: https://github.com/fat/zoom.js/issues/12

[keoshi]

Switched to unveil and it seems to be fully compatible with zoom.js — closing this.