Unmaintained Lazy Load [img] 1.3.1

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