Fix Safari Back-Forward Cache issue with lazyloading image elements (f…

…ixes #711)
aFarkas · Oct 26, 2019 · 7a7f5d9 · 7a7f5d9
1 parent 2af744a
commit 7a7f5d9
Show file tree

Hide file tree

Showing 7 changed files with 57 additions and 4 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,8 +1,13 @@
 # Changelog
 
+## x
+
+* Fix Safari Back-Forward Cache issue with lazyloading image elements (fixes [#711](https://github.com/aFarkas/lazysizes/issues/711))
+* Add lazyload of autoplay videos to unveilhooks  (fixes [#697](https://github.com/aFarkas/lazysizes/issues/697))
+
 ## 5.1.2
 
-Fix visibility check (fixes [#709](https://github.com/aFarkas/lazysizes/issues/709))
+* Fix visibility check (fixes [#709](https://github.com/aFarkas/lazysizes/issues/709))
 
 ## 5.1.1
 

diff --git a/Gruntfile.js b/Gruntfile.js
@@ -83,7 +83,7 @@
 				},
 				minified: {
 					options: {
-						maxBytes: (1024 * 7)
+						maxBytes: (1024 * 7.5)
 					},
 					src: ["lazysizes.min.js"]
 				}

diff --git a/lazysizes-umd.js b/lazysizes-umd.js
@@ -605,6 +605,22 @@
 
 				addEventListener('resize', throttledCheckElements, true);
 
+				addEventListener('pageshow', function (e) {
+					if (e.persisted) {
+						var loadingElements = document.querySelectorAll('.' + lazySizesCfg.loadingClass);
+
+						if (loadingElements.length && loadingElements.forEach) {
+							requestAnimationFrame(function () {
+								loadingElements.forEach( function (img) {
+									if (img.complete) {
+										unveilElement(img);
+									}
+								});
+							});
+						}
+					}
+				});
+
 				if(window.MutationObserver){
 					new MutationObserver( throttledCheckElements ).observe( docElem, {childList: true, subtree: true, attributes: true} );
 				} else {

diff --git a/lazysizes-umd.min.js b/lazysizes-umd.min.js
diff --git a/lazysizes.js b/lazysizes.js
@@ -603,6 +603,22 @@
 
 				addEventListener('resize', throttledCheckElements, true);
 
+				addEventListener('pageshow', function (e) {
+					if (e.persisted) {
+						var loadingElements = document.querySelectorAll('.' + lazySizesCfg.loadingClass);
+
+						if (loadingElements.length && loadingElements.forEach) {
+							requestAnimationFrame(function () {
+								loadingElements.forEach( function (img) {
+									if (img.complete) {
+										unveilElement(img);
+									}
+								});
+							});
+						}
+					}
+				});
+
 				if(window.MutationObserver){
 					new MutationObserver( throttledCheckElements ).observe( docElem, {childList: true, subtree: true, attributes: true} );
 				} else {