Resource icon

Lazy Load [img] 1.3.1

No permission to download
Upgrade note; delete js/SV/LazyImageLoader folder (case sensitive!) before uploading new contents.
  • Change js directory from js/SV/LazyImageLoader to js/sv/lazyimageloader; warning paths are case sensitive in most webservers but not in Windows. Ensure you remove the old folder before uploading the new folder!
  • Fixed that 1.3.0 loaded the js files from the old path
Upgrade note; delete js/SV/LazyImageLoader folder before uploading new contents.
  • Change js directory from js/SV/LazyImageLoader to js/sv/lazyimageloader; warning paths are case sensitive in most webservers but not in Windows. Ensure you remove the old folder before uploading the new folder!
  • Upgrade lazysizes from v2.0.7 to v4.0.2
Reactions: Triops and rdn
  • Fix bug where image thumbnails are not displayed at correct dimensions

Thanks @Ralle
Reactions: Robru and Sunka
For attachments built an inline SVG which reserves the space for the image, hopefully removing jank for attachments. This should work for modern browsers, but older browsers may see a broken image until the actual image loads.

Thanks @Ralle
  • Use javaScriptSource to support CDN/alternative javascript paths
  • Fix an issue the image would not resize when resizing the window smaller.
  • Bugfixes to XFMG integration. Thanks @Nuno
Thanks to @Nuno for contributing.
  • Adds support for lazyloading the thumbnail image.
  • Update lazysizes javascript library to 2.0.7
Fix distortion image aspect ratio for attachments.
Replaced lazyloading script 'unveil' with 'lazysizes. Browser support is at least IE9, or Firefox, or Chrome.

Provides a much smoother lazy-loading experience, and better client performance.

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;
}
Top