improve gecko fixes

plugins/static-gecko-picture/ls.static-gecko-picture.js

@@ -1,47 +1,66 @@
 /**
  * FF's first picture implementation is static and does not react to viewport changes, this tiny script fixes this.
  */
-(function(){
+(function(window) {
 	/*jshint eqnull:true */
 	var ua = navigator.userAgent;
 
-	if(window.HTMLPictureElement && ((/ecko/).test(ua) && ua.match(/rv\:(\d+)/) && RegExp.$1 < 41)){
-		addEventListener('resize', (function(){
+	if ( window.HTMLPictureElement && ((/ecko/).test(ua) && ua.match(/rv\:(\d+)/) && RegExp.$1 < 41) ) {
+		addEventListener("resize", (function() {
 			var timer;
 
-			var dummySrc = document.createElement('source');
+			var dummySrc = document.createElement("source");
 
-			var fixPicture = function(img){
+			var fixRespimg = function(img) {
+				var source, sizes;
 				var picture = img.parentNode;
-				var source = dummySrc.cloneNode();
-				picture.insertBefore(source, picture.firstElementChild);
-				setTimeout(function(){
-					picture.removeChild(source);
-				});
+
+				if (picture.nodeName.toUpperCase() === "PICTURE") {
+					source = dummySrc.cloneNode();
+
+					picture.insertBefore(source, picture.firstElementChild);
+					setTimeout(function() {
+						picture.removeChild(source);
+					});
+				} else if (!img._pfLastSize || img.offsetWidth > img._pfLastSize) {
+					img._pfLastSize = img.offsetWidth;
+					sizes = img.sizes;
+					img.sizes += ",100vw";
+					setTimeout(function() {
+						img.sizes = sizes;
+					});
+				}
 			};
 
-			var findPictureImgs = function(){
+			var findPictureImgs = function() {
 				var i;
-				var imgs = document.querySelectorAll('picture > img');
-				for(i = 0; i < imgs.length; i++){
-					if(imgs[i].complete){
-						if(imgs[i].currentSrc){
-							fixPicture(imgs[i]);
-						}
-					} else if(imgs[i].currentSrc){
-						removeEventListener('resize', onResize);
-						break;
-					}
+				var imgs = document.querySelectorAll("picture > img, img[srcset][sizes]");
+				for (i = 0; i < imgs.length; i++) {
+					fixRespimg(imgs[i]);
 				}
 			};
-			var onResize = function(){
+			var onResize = function() {
 				clearTimeout(timer);
 				timer = setTimeout(findPictureImgs, 99);
 			};
+			var mq = window.matchMedia && matchMedia("(orientation: landscape)");
+			var init = function() {
+				onResize();
+
+				if (mq && mq.addListener) {
+					mq.addListener(onResize);
+				}
+			};
+
+			dummySrc.srcset = "data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==";
 
-			dummySrc.srcset = 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==';
+			if (/^[c|i]|d$/.test(document.readyState || "")) {
+				init();
+			} else {
+				document.addEventListener("DOMContentLoaded", init);
+			}
 
 			return onResize;
 		})());
 	}
-})();
+})(window);