Removed gsap for blog images lazy loaded 🚀

chicio · chicio · commit 643a4b82a3ad · 2019-05-10T15:06:10.000+02:00
diff --git a/_css/common.scss b/_css/common.scss
@@ -34,10 +34,19 @@ canvas {
   background-color: $primary-color;
 }
 
+@keyframes show-lazy-element-animation {
+  from {opacity: 0;}
+  to {opacity: 1;}
+}
+
 .lazy {
   background-color: $divider-color;
 }
 
+.lazy-show {
+  animation: show-lazy-element-animation 0.5s;
+}
+
 .break {
   display: inline
 }
diff --git a/_includes/dependencies-css-blog-archive.html b/_includes/dependencies-css-blog-archive.html
@@ -1 +1 @@
-<link rel="stylesheet" type="text/css" href="/assets/styles/style.blog.archive.css?rev=a41393a0652f304beb44c5e410fe95e6">
+<link rel="stylesheet" type="text/css" href="/assets/styles/style.blog.archive.css?rev=aa1217bce6b8de26b88f4912ad90f2b7">
diff --git a/_includes/dependencies-css-blog-home.html b/_includes/dependencies-css-blog-home.html
@@ -1 +1 @@
-<link rel="stylesheet" type="text/css" href="/assets/styles/style.blog.home.css?rev=289c072731f88281811cd88618f289f4">
+<link rel="stylesheet" type="text/css" href="/assets/styles/style.blog.home.css?rev=c01e75c67a69e16fab34d0cf102f35a9">
diff --git a/_includes/dependencies-css-blog-post.html b/_includes/dependencies-css-blog-post.html
@@ -1 +1 @@
-<link rel="stylesheet" type="text/css" href="/assets/styles/style.blog.post.css?rev=94d16ba2198a523b645fdc41b6e91dcc">
+<link rel="stylesheet" type="text/css" href="/assets/styles/style.blog.post.css?rev=4893339e048ba273f599687560368110">
diff --git a/_includes/dependencies-css-blog-tags.html b/_includes/dependencies-css-blog-tags.html
@@ -1 +1 @@
-<link rel="stylesheet" type="text/css" href="/assets/styles/style.blog.tags.css?rev=065b461ebf01d5e0b4a34df3f0905fa0">
+<link rel="stylesheet" type="text/css" href="/assets/styles/style.blog.tags.css?rev=e91cd47687226d158f1fa57c3709a958">
diff --git a/_includes/dependencies-css-cookie-policy.html b/_includes/dependencies-css-cookie-policy.html
@@ -1 +1 @@
-<link rel="stylesheet" type="text/css" href="/assets/styles/style.cookiepolicy.css?rev=2bd3d2962fe7a38453e201b1aa5afaeb">
+<link rel="stylesheet" type="text/css" href="/assets/styles/style.cookiepolicy.css?rev=8ebdfedf0b7a086e10b81e182c01dbd4">
diff --git a/_includes/dependencies-css-home.html b/_includes/dependencies-css-home.html
@@ -1 +1 @@
-<link rel="stylesheet" type="text/css" href="/assets/styles/style.home.css?rev=8fecaa467840db7c98338267e6c1949f">
+<link rel="stylesheet" type="text/css" href="/assets/styles/style.home.css?rev=6c0bd9ef44d4a49a86572a7a86248296">
diff --git a/_includes/dependencies-css-privacy-policy.html b/_includes/dependencies-css-privacy-policy.html
@@ -1 +1 @@
-<link rel="stylesheet" type="text/css" href="/assets/styles/style.privacypolicy.css?rev=2bd3d2962fe7a38453e201b1aa5afaeb">
+<link rel="stylesheet" type="text/css" href="/assets/styles/style.privacypolicy.css?rev=8ebdfedf0b7a086e10b81e182c01dbd4">
diff --git a/_includes/dependencies-js-blog.html b/_includes/dependencies-js-blog.html
@@ -16,5 +16,5 @@
 </script>
 <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-AMS_SVG"></script>
 <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.0.3/cookieconsent.min.js"></script>
-<script type="text/javascript" src="/assets/js/index.blog.min.js?rev=28484bdb2c40a3a85560b0ce0fdce26e"></script>
+<script type="text/javascript" src="/assets/js/index.blog.min.js?rev=4f8b809675406a9d752d3841efbf6db7"></script>
 {%include service-worker.html %}
diff --git a/_includes/dependencies-js-home.html b/_includes/dependencies-js-home.html
@@ -1,3 +1,3 @@
 <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.0.3/cookieconsent.min.js"></script>
-<script type="text/javascript" src="/assets/js/index.home.min.js?rev=5b19514509c40def11a0123787efc89f"></script>
+<script type="text/javascript" src="/assets/js/index.home.min.js?rev=fb8f1ee5543fc2361d7b474d5dccdcf7"></script>
 {%include service-worker.html %}
diff --git a/_includes/service-worker-css-blog-archive-urls.js b/_includes/service-worker-css-blog-archive-urls.js
@@ -1 +1 @@
-"/assets/styles/style.blog.archive.css?rev=a41393a0652f304beb44c5e410fe95e6",
+"/assets/styles/style.blog.archive.css?rev=aa1217bce6b8de26b88f4912ad90f2b7",
diff --git a/_includes/service-worker-css-blog-home-urls.js b/_includes/service-worker-css-blog-home-urls.js
@@ -1 +1 @@
-"/assets/styles/style.blog.home.css?rev=289c072731f88281811cd88618f289f4",
+"/assets/styles/style.blog.home.css?rev=c01e75c67a69e16fab34d0cf102f35a9",
diff --git a/_includes/service-worker-css-blog-post-urls.js b/_includes/service-worker-css-blog-post-urls.js
@@ -1 +1 @@
-"/assets/styles/style.blog.post.css?rev=94d16ba2198a523b645fdc41b6e91dcc",
+"/assets/styles/style.blog.post.css?rev=4893339e048ba273f599687560368110",
diff --git a/_includes/service-worker-css-blog-tags-urls.js b/_includes/service-worker-css-blog-tags-urls.js
@@ -1 +1 @@
-"/assets/styles/style.blog.tags.css?rev=065b461ebf01d5e0b4a34df3f0905fa0",
+"/assets/styles/style.blog.tags.css?rev=e91cd47687226d158f1fa57c3709a958",
diff --git a/_includes/service-worker-css-cookie-policy-urls.js b/_includes/service-worker-css-cookie-policy-urls.js
@@ -1 +1 @@
-"/assets/styles/style.cookiepolicy.css?rev=2bd3d2962fe7a38453e201b1aa5afaeb",
+"/assets/styles/style.cookiepolicy.css?rev=8ebdfedf0b7a086e10b81e182c01dbd4",
diff --git a/_includes/service-worker-css-home-urls.js b/_includes/service-worker-css-home-urls.js
@@ -1 +1 @@
-"/assets/styles/style.home.css?rev=8fecaa467840db7c98338267e6c1949f",
+"/assets/styles/style.home.css?rev=6c0bd9ef44d4a49a86572a7a86248296",
diff --git a/_includes/service-worker-css-privacy-policy-urls.js b/_includes/service-worker-css-privacy-policy-urls.js
@@ -1 +1 @@
-"/assets/styles/style.privacypolicy.css?rev=2bd3d2962fe7a38453e201b1aa5afaeb",
+"/assets/styles/style.privacypolicy.css?rev=8ebdfedf0b7a086e10b81e182c01dbd4",
diff --git a/_includes/service-worker-js-blog-urls.js b/_includes/service-worker-js-blog-urls.js
@@ -1 +1 @@
-"/assets/js/index.blog.min.js?rev=28484bdb2c40a3a85560b0ce0fdce26e",
+"/assets/js/index.blog.min.js?rev=4f8b809675406a9d752d3841efbf6db7",
diff --git a/_includes/service-worker-js-home-urls.js b/_includes/service-worker-js-home-urls.js
@@ -1 +1 @@
-"/assets/js/index.home.min.js?rev=5b19514509c40def11a0123787efc89f",
+"/assets/js/index.home.min.js?rev=fb8f1ee5543fc2361d7b474d5dccdcf7",
diff --git a/_js/common/lazy-load-images.js b/_js/common/lazy-load-images.js
@@ -1,6 +1,6 @@
 /* @flow */
 import 'intersection-observer'
-import { removeCssClass } from './css-class'
+import { addCssClass, removeCssClass } from './css-class'
 
 const lazyLoadImages = (selector: string, loadCompleted: (image: HTMLImageElement) => void) => {
   const intersectionObserver: IntersectionObserver = new IntersectionObserver(
@@ -29,7 +29,7 @@ const loadImage = (image: HTMLImageElement, loadCompleted: (image: HTMLImageElem
   image.src = image.dataset.src
   image.onload = () => {
     removeCssClass(image, 'lazy')
-    loadCompleted(image)
+    addCssClass(image, 'lazy-show')
   }
 }
 
diff --git a/_jsbuild/common/lazy-load-images.js b/_jsbuild/common/lazy-load-images.js
@@ -1,6 +1,6 @@
 /*  */
 import 'intersection-observer'
-import { removeCssClass } from './css-class'
+import { addCssClass, removeCssClass } from './css-class'
 
 const lazyLoadImages = (selector, loadCompleted) => {
   const intersectionObserver = new IntersectionObserver(
@@ -29,7 +29,7 @@ const loadImage = (image, loadCompleted) => {
   image.src = image.dataset.src
   image.onload = () => {
     removeCssClass(image, 'lazy')
-    loadCompleted(image)
+    addCssClass(image, 'lazy-show')
   }
 }
 
diff --git a/assets/js/index.blog.min.js b/assets/js/index.blog.min.js
diff --git a/assets/js/index.home.min.js b/assets/js/index.home.min.js
diff --git a/assets/styles/style.blog.archive.css b/assets/styles/style.blog.archive.css
diff --git a/assets/styles/style.blog.home.css b/assets/styles/style.blog.home.css
diff --git a/assets/styles/style.blog.post.css b/assets/styles/style.blog.post.css
diff --git a/assets/styles/style.blog.tags.css b/assets/styles/style.blog.tags.css
diff --git a/assets/styles/style.cookiepolicy.css b/assets/styles/style.cookiepolicy.css
diff --git a/assets/styles/style.home.css b/assets/styles/style.home.css
diff --git a/assets/styles/style.privacypolicy.css b/assets/styles/style.privacypolicy.css

Original file line number	Diff line number	Diff line change
`@@ -34,10 +34,19 @@ canvas {`
`34`	`34`	`background-color: $primary-color;`
`35`	`35`	`}`
`36`	`36`
	`37`	`+@keyframes show-lazy-element-animation {`
	`38`	`+ from {opacity: 0;}`
	`39`	`+ to {opacity: 1;}`
	`40`	`+}`
	`41`	`+`
`37`	`42`	`.lazy {`
`38`	`43`	`background-color: $divider-color;`
`39`	`44`	`}`
`40`	`45`
	`46`	`+.lazy-show {`
	`47`	`+ animation: show-lazy-element-animation 0.5s;`
	`48`	`+}`
	`49`	`+`
`41`	`50`	`.break {`
`42`	`51`	`display: inline`
`43`	`52`	`}`
Original file line number	Diff line number	Diff line change
`@@ -1 +1 @@`
`1`		`-<link rel="stylesheet" type="text/css" href="/assets/styles/style.blog.archive.css?rev=a41393a0652f304beb44c5e410fe95e6">`
	`1`	`+<link rel="stylesheet" type="text/css" href="/assets/styles/style.blog.archive.css?rev=aa1217bce6b8de26b88f4912ad90f2b7">`