Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save celticwebdesign/3fa385eff74c01ff9fb9181ef649a379 to your computer and use it in GitHub Desktop.
Save celticwebdesign/3fa385eff74c01ff9fb9181ef649a379 to your computer and use it in GitHub Desktop.
SCSS
.image-container {
position: relative;
// image is a background image of this container
// https://github.com/verlok/lazyload/blob/master/demos/fade_in.html
opacity: 0;
@include transition(400ms);
// https://css-tricks.com/almanac/selectors/a/attribute/
// https://github.com/verlok/lazyload/blob/master/demos/fade_in.html
&[data-was-processed="true"] {
opacity: 1;
}
JS Plugin
https://github.com/verlok/lazyload/ > dist > lazyload.min.js
jQuery
// using
// https://github.com/verlok/lazyload
// for lazy loading of portfolio images on ALM event as below
var lazyLoadInstance = new LazyLoad({
elements_selector: ".lazy",
load_delay: 400,
threshold: 0
});
// for lazy loading of portfolio images on ALM event as below
window.almComplete = function(alm) {
if (lazyLoadInstance) {
// console.log(lazyLoadInstance);
lazyLoadInstance.update();
}
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment