Unslider - Lazyloading & Thumbnails Plugin
unslider-lazyload plugin for
unslider.js extends your slider with lazyloading functionality, enables sourceset usage and introduces Thumbnails.
This plugin has been thoroughly tested in a production environment for quite some time now, making it fit for open source release and peace-of-mind usage.
Let's talk Performance
Unslider Lazyload makes use of the following techniques so save bandwith and boost your sites performance:
- Most obviously by lazyloading every slide uporn interaction
- The first two slides of each slider instance are loaded upon entering the viewport
- Upon first interacting with the slider (through clicking or swiping), the third image is lazyloaded in the background (one new image loaded per interaction going forward), until all images have been lazyloaded
- Through the use of sourcesets, you can define multiple sets of images per slider and define tresholds, in order to load a specific image resolution at a specific viewport width
- All Thubmnails are also lazyloaded when entering the viewport in sets of seven images per loading cycle
- Thumbnails are hidden on mobile devices (as their using them on smartphones becomes a hassle) and all relevant JS listeners are stopped or removed, further speeding things up
- Thumbnails are defined in a seperate array, which let's you implement small res images
To se all of this in action, head over to the demo and inspect the page with Chromes Network tool.
Nails to thumb on. No seriously, you know what these are and what they do. See the demo to get an impression.
How To Init
I strongly recommend running this repo locally and playing with it for a bit before implementing. Pleace continue to read through this readme to learn how.
unsliderLazyLoad( images[array], imagesThumb[array], description[array], alt[array], instance[int], sliderName[object], toggleThumbnails[boolean] )
Note: Init at the end of the body-tag, directly after Unslider.
|images:||A one- or multi-dimensional array containing the URLs to the images that should be displayed - should be sorted in a descending manner (ie. biggest res to lowest res)|
|description:||An array containing Strings that are used in the title-tag of each image|
|alt:||An array containing Strings that are used in the alt-tag of each image (including Thumbnails)|
|instance:||If multiple lazy loaded Unslider-Galleries are initialized, give each of them an incrementing index starting with zer0|
|sliderName:||The variable you've used to init Unslider (e.g. slider, like in: slider = $('#unslider').unslider())|
|imagesThumb:||Optional - An array containing the URLs to the Thumbnails that should be displayed, prefferably in a lower resolution|
Global Namespace: ull_
Cloning & Installing
These instructions will get you a copy of the project and up and running implementing and testing this plugin to your hearts desire.
You need to have gulp CLI, git and NPM installed globally on your machine. Then you can simply clone this repo and do:
Please note that this package runs well on Windows machines and has not been tested on Mac or Linux, but should work there too.
Run when actively manipulating PUG or SCSS.
Run and find the project running @
CDN & NPM Support
Here you go:
PR and Issues
If you want to propose a push request, please go ahead. If you come across an issue or would like to propose a feature, to so in the Issues section.
Big thanks to
Interchalet in Freiburg, Germany for defacto sponsoring this plugin. A lot of polish and the release has been done during my spare time, but the majority of developing and testing was made possible by integrating me into the dev & design team as a freelancer. The images used in the demo are actually real holiday homes you can rent, spreading across europe and beyond.
Roadmap & Todos
- Improve demos
- Make demos responsive
- Make swiping functionality optional
- Come up with a proper documentation
- Minified version
- ...some more stuff I can't think of right now