Add after-unveil event. #25
Conversation
|
Not sure wether you need this. In case you are using jQuery, the following code should just work: <style>
img.lazyload {
opacity: 0;
}
</style>
<script>
$(document).on('lazybeforeunveil', (function(){
var onLoad = function(e){
$(e.target)
.animate({opacity: 1})
.off('load error', onLoad)
;
};
return function(e){
if(!e.isDefaultPrevented()){
$(e.target)
.filter('img')
.css({opacity: 0})
.on('load error', onLoad)
;
}
};
})());
</script>There is no really need to do this right after unveil. |
|
You're right, that works just fine. Closing. Thanks for the quick response! |
|
Maybe you could add that code to the README as an example? |
|
Yes will do. Additionally, I'm currently working on a small extension. Current code looks like this: /**
* effect plugin for lazySizes:
*
* Usage:
*
* 1. fadein after loading:
*
img.lazyload,
img.lazyloading {
opacity: 0;
}
img.lazyloaded {
opacity: 1;
transition: opactiy 300ms;
}
*
* 2. fadein while loading:
*
img.lazyload {
opacity: 0;
}
img.lazyloading {
opacity: 1;
transition: opactiy 300ms;
}
*/
(function(window, document){
'use strict';
var config, animEvent;
if(document.addEventListener){
config = window.lazySizesConfig || (window.lazySizes && lazySizes.cfg);
animEvent = 'onwebkitanimationend' in window ? 'webkitanimationend' : 'animationend';
if(!config){
config = {};
window.lazySizesConfig = config;
}
if(!('loadingClass' in config)){
config.loadingClass = 'lazyloading';
}
if(!('loadedClass' in config)){
config.loadedClass = 'lazyloaded';
}
document.addEventListener('lazybeforeunveil', function(e){
if(!e.defaultPrevented && e.target.nodeName.toUpperCase() == 'IMG' && lazySizes.aC) {
e.target.addEventListener('load', onLoad, false);
e.target.addEventListener('error', onLoad, false);
if(config.loadingClass){
lazySizes.aC(e.target, config.loadingClass);
}
}
}, false);
}
function removeLoadedClass(e){
e.target.removeEventListener('transitionend', removeLoadedClass, false);
e.target.removeEventListener(animEvent, removeLoadedClass, false);
lazySizes.rC(e.target, config.loadedClass);
}
function onLoad(e){
e.target.removeEventListener('load', onLoad, false);
e.target.removeEventListener('error', onLoad, false);
if(config.loadingClass){
lazySizes.rC(e.target, config.loadingClass);
}
if(config.loadedClass){
e.target.addEventListener('transitionend', removeLoadedClass, false);
e.target.addEventListener(animEvent, removeLoadedClass, false);
lazySizes.aC(e.target, config.loadedClass);
}
}
})(window, document);You can use css transitions or css animations. |
|
Cool! I'd be happy to test it once you have a PR. I'm implementing this for https://github.com/joelhawksley/SoloFolio/issues/135 |
|
Looks great, will ping you as soon as this is pushed. Will be on saturday. |
|
@joelhawksley I have just updated and pushed the extension to the master branch. To get this work you also need to update lazysizes itself. As a side note, with lazysizes you can also fully substitute the current lazyloader (unveil). Hope you like ti. Cheers |
|
Just wanted to inform you, that I directly added the effect feature into lazySizes. To get the loaded and loading classes you need to turn on the |
|
Thanks Alex! I'm going to work on integrating this with SoloFolio when I'm back from vacation :) |
This added event allows one to bind to the completion of the image srcset being set, allowing for easy implementation of fade-in effects.