celticwebdesign · July 23, 2019 08:01 · Jul 23, 2019
diff --git a/Merging Ajax Load More with LazyLoad b/Merging Ajax Load More with LazyLoad
@@ -0,0 +1,36 @@
+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();
+            }
+        };