![Lazy Load [img]](/community/data/resource_icons/3/3979.jpg?1556853020){kind=icon}
- Compatible XF 1.x versions
- 1.4
- 1.5
- Additional requirements
- php 5.4+
Require Client Browsers to be at least IE9, Firefox or Chrome.
- License
- MIT Licence
Provides lazy loaded image support via the Lazysizes
A zero query method for per user-group lazy loading of the [img] and [attach] tags in threads and conversations with adjustable distance before images are loaded.
Uses a noscript tag around the original img tag.
Supports:
Option to force lazy loading of contents in a spoiler tag.
Permissions:
Adds the permission:
Options:
Unveil effects
Add styling to your theme for the classes: lazyload, lazyloading, lazyloaded.
Fade in
Spinner
Known issues:
Licensing:
Lazysizes is MIT Licensed, as of 2018-05-09.
Original source is https://github.com/aFarkas/lazysizes, mirrored; https://github.com/xon/lazysizes
Installation
I recommend using Add-on install & upgrade to install this add-on.
Contributing features or bug fixes
Please create a Github Pull request via the "More Information" link.
Contibutions
If you appreciate this addon, please consider a contribution via PayPal. Details will be provide via private conversation.
Please contact me if you wish for different licencing arrangements.
A zero query method for per user-group lazy loading of the [img] and [attach] tags in threads and conversations with adjustable distance before images are loaded.
Uses a noscript tag around the original img tag.
Supports:
- [Tinhte] Image Attachment Optimization & CDN Supportadd-on.
- XenForo Media Gallery add-on
Option to force lazy loading of contents in a spoiler tag.
Permissions:
Adds the permission:
- Enable Lazy Load Images
Options:
- Enable Outside threads/Conversations
- permits the lazy loading bbcode injection to run outside of those contexts. Inside those context it will still respect permissions.
- Force Lazy Loaded Spoiler
Unveil effects
Add styling to your theme for the classes: lazyload, lazyloading, lazyloaded.
Fade in
CSS:
/* fade image in after load */
.lazyload,
.lazyloading {
opacity: 0;
}
.lazyloaded {
opacity: 1;
transition: opacity 300ms;
}Spinner
CSS:
/* fade image in while loading and show a spinner as background image (good for progressive images) */
.lazyload {
opacity: 0;
}
.lazyloading {
opacity: 1;
transition: opacity 300ms;
background: #f7f7f7 url(loader.gif) no-repeat center;
}Known issues:
- Doesn't work with Resource Manager.
Licensing:
Lazysizes is MIT Licensed, as of 2018-05-09.
Original source is https://github.com/aFarkas/lazysizes, mirrored; https://github.com/xon/lazysizes
Installation
I recommend using Add-on install & upgrade to install this add-on.
Contributing features or bug fixes
Please create a Github Pull request via the "More Information" link.
Contibutions
If you appreciate this addon, please consider a contribution via PayPal. Details will be provide via private conversation.
Please contact me if you wish for different licencing arrangements.
