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...