Not working with Lazyloaded Images

[jaschaio]

I am using a lazyloading script to load images once the visitor starts scrolling. The script just takes the src and srcset attributes and replaces it with the ones prefixed with data-:

<div class="lazy" style="padding-bottom:52.33%">
    <img
        src="/img/lazyload.gif"
        alt=""
        width="1200"
        height="628"
        sizes="(max-width: 1200px) 100vw, 1200px"
        data-src="/img/image-1.jpg"
        data-srcset="/img/image-1.jpg 1200w, /img/image-1-300x157.jpg 300w, /img/image-1-600x314.jpg 600w, /img/image-1-1024x536.jpg 1024w"
    />
</div>

Unfortunately if I click on a data-pin-do="buttonBookmark" Button the Grid only displays the images which are not lazyloaded. Only if I scroll down to the end of the page and thus all src's have been replaced it displays all images correctly.

I tried loading all images before I do the "buttonBookmark" action but the pinit script doesn't seem to recognize them on the first click. I have to close the grid overlay and click again until it recognizes all images.

The same is true for the "Pinit Chrome Extension".

Is there anything I can do to make this work?

[kentbrew]

Once an image has been added to the DOM our inline scraper should see it. I know we had trouble with srcsets earlier this year, but that should be fixed.

One way to test would be to inject pinmarklet.js by hand with a toolbar bookmarklet, as documented here:

https://gist.github.com/kentbrew/142cb69124223a5d0f3b3fd7fc2c6bd0