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?
I am using a lazyloading script to load images once the visitor starts scrolling. The script just takes the
srcandsrcsetattributes and replaces it with the ones prefixed withdata-: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?