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
  • Fix bug where image thumbnails are not displayed at correct dimensions

Thanks @Ralle
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