Lazy loading will not load image until it becomes visible to a user.
Pixboost.js supports lazy loading for both responsive and non-responsive images. To enable
lazy load you need to add
data-lazy attribute to
<div data-pb-picture data-lazy data-url="https://yoursite.com/doggy.png" data-lg="optimise" data-md="resize?size=300" data-sm="fit?size=100x100"/>
<img data-pb-image data-lazy data-op="resize?size=x600" data-src="https://yoursite.com/doggy.png"/>
Lazy loading in Pixboost.js implemented by using 3rd party library lozad.js. In order to make it work, you'll need to use pixboost bundle (see Usage section) or add the library with polyfill for the Intersection Observer feature if you want to have support in all browsers:
WARNING: In case of using polyfill make sure that you test your application in all browsers. We found some issues in IE (before Edge) and Safari with absolute positioning when using polyfill.