Jump to content


Developer Documentation

Image Lazy Loading

To support lazy loading in your content, first of all, the container of the image needs either to utilize the ipsLazyLoad module or if you're using the Lightbox, it's enough to have your content wrapped by an element utilizing the core.front.core.lightboxedImages controller.

<div data-ipsLazyLoad>
{{if settings.lazy_load_enabled}}
		<img src='{expression="\IPS\Text\Parser::blankImage()"}' data-src='{$coverPhoto->file->url}' class='ipsCoverPhoto_photo' data-action="toggleCoverPhoto" alt=''>
		<img src='{$coverPhoto->file->url}' class='ipsCoverPhoto_photo' data-action="toggleCoverPhoto" alt=''>


If you are loading html content which could contain lazy loaded images via JS, you can call 

ips.utils.lazyLoad.loadContent( elem );

in your controller to load the elements, or alternatively

ips.utils.lazyLoad.observe( elem );

to attach the lazy load observer to the new element.


Since IPS 4.4.2 you can also use the richText template to parse your content.

{template="richText" group="global" app="core" location="global" params="Content containing the lazy load images", array('ipsType_normal')"}


  Report Document

  • Create New...

Important Information

We use technologies, such as cookies, to customise content and advertising, to provide social media features and to analyse traffic to the site. We also share information about your use of our site with our trusted social media, advertising and analytics partners. See more about cookies and our Privacy Policy