From ee6ad9ebbda8dbee85d6b6f70bdedd0b084828bb Mon Sep 17 00:00:00 2001 From: Ivo Petkov Date: Sat, 19 Dec 2015 08:27:25 +0200 Subject: [PATCH] Removed "height:0" for images with unknown height (img.responsively-lazy), because they are not visible in unsupported browsers. --- README.md | 2 +- package.json | 2 +- responsivelyLazy.css | 1 - responsivelyLazy.js | 3 --- responsivelyLazy.min.css | 2 +- responsivelyLazy.min.js | 10 +++++----- 6 files changed, 8 insertions(+), 12 deletions(-) diff --git a/README.md b/README.md index bd62d73..656aad1 100644 --- a/README.md +++ b/README.md @@ -62,7 +62,7 @@ Let's not break it when we can enhance it. ## Browser support -The lazy loading works in browsers supporting the srcset attribute. As of August 2015 that's [62.78%](http://caniuse.com/#feat=srcset). Unsupported browsers will load the image in the src attribute. That's the image search engines and social networks will find, so it's better to make it high resolution. +The lazy loading works in browsers supporting the srcset attribute. As of December 2015 that's [66.47%](http://caniuse.com/#feat=srcset). Unsupported browsers will load the image in the src attribute. That's the image search engines and social networks will find, so it's better to make it high resolution. ## License Free to use under the [MIT license](http://opensource.org/licenses/MIT). diff --git a/package.json b/package.json index f852da5..d0096a1 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "responsively-lazy", "title": "Responsively Lazy", - "version": "1.2.0", + "version": "1.2.1", "description": "Lazy load responsive images", "homepage": "http://ivopetkov.com/b/lazy-load-responsive-images/", "author": { diff --git a/responsivelyLazy.css b/responsivelyLazy.css index 4af3977..bdc6d00 100644 --- a/responsivelyLazy.css +++ b/responsivelyLazy.css @@ -20,5 +20,4 @@ img.responsively-lazy{ width:100%; - height:0; } \ No newline at end of file diff --git a/responsivelyLazy.js b/responsivelyLazy.js index 8c15ede..ecb98bf 100644 --- a/responsivelyLazy.js +++ b/responsivelyLazy.js @@ -101,9 +101,6 @@ if (typeof responsivelyLazy === 'undefined') { if (container.lastSetOption[1] < bestSelectedOption[1]) { container.lastSetOption = bestSelectedOption; element.setAttribute('srcset', bestSelectedOption[0]); - if (unknownHeight) { - element.style.height = "auto"; - } } } diff --git a/responsivelyLazy.min.css b/responsivelyLazy.min.css index 8a230ad..684b4de 100644 --- a/responsivelyLazy.min.css +++ b/responsivelyLazy.min.css @@ -4,4 +4,4 @@ * Copyright 2015, Ivo Petkov * Free to use under the MIT license. */ -.responsively-lazy:not(img){position:relative;height:0}.responsively-lazy:not(img) img{position:absolute;top:0;left:0;width:100%;height:100%}img.responsively-lazy{width:100%;height:0} \ No newline at end of file +.responsively-lazy:not(img){position:relative;height:0}.responsively-lazy:not(img) img{position:absolute;top:0;left:0;width:100%;height:100%}img.responsively-lazy{width:100%;} \ No newline at end of file diff --git a/responsivelyLazy.min.js b/responsivelyLazy.min.js index 600f01e..9ad4091 100644 --- a/responsivelyLazy.min.js +++ b/responsivelyLazy.min.js @@ -4,8 +4,8 @@ * Copyright 2015, Ivo Petkov * Free to use under the MIT license. */ -if("undefined"===typeof responsivelyLazy){var responsivelyLazy={hasChange:!0,hasWebPSupport:!1,isVisible:function(a){var d=a.getBoundingClientRect();a=window.innerWidth;var q=d.top,n=d.left,l=d.width,d=d.height;return qb[1])return 1;if(a[1]===b[1]){if(-1!==b[0].indexOf(".webp",b[0].length-5))return 1;if(-1!==a[0].indexOf(".webp",a[0].length-5))return-1}return 0});e=m}else e=[];m=k.offsetWidth*window.devicePixelRatio;c=null;p=e.length;for(g=0;g=m){c=b;break}null===c&&(c=[h.getAttribute("src"),999999]);"undefined"===typeof k.lastSetOption&&(k.lastSetOption=["",0]);k.lastSetOption[1] img"),!1);a(document.querySelectorAll("img.responsively-lazy"),!0)}};if("srcset"in document.createElement("img")&&"undefined"!==typeof window.devicePixelRatio&&"undefined"!==typeof window.addEventListener&&"undefined"!== -typeof document.querySelectorAll){var requestAnimationFrameFunction=window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||function(a){window.setTimeout(a,1E3/60)},runIfHasChange=function(){responsivelyLazy.hasChange&&(responsivelyLazy.hasChange=!1,responsivelyLazy.run());requestAnimationFrameFunction.call(null,runIfHasChange)},setChanged=function(){responsivelyLazy.hasChange=!0},image=new Image;image.src="data:image/webp;base64,UklGRiQAAABXRUJQVlA4IBgAAAAwAQCdASoCAAEADMDOJaQAA3AA/uuuAAA="; -image.onload=image.onerror=function(){responsivelyLazy.hasWebPSupport=2===image.width;runIfHasChange();window.addEventListener("resize",setChanged);window.addEventListener("scroll",setChanged);window.addEventListener("load",setChanged)}}}; \ No newline at end of file +if("undefined"===typeof responsivelyLazy){var responsivelyLazy={hasChange:!0,hasWebPSupport:!1,isVisible:function(c){var d=c.getBoundingClientRect();c=window.innerWidth;var q=d.top,n=d.left,k=d.width,d=d.height;return qb[1])return 1;if(a[1]===b[1]){if(-1!==b[0].indexOf(".webp",b[0].length-5))return 1;if(-1!==a[0].indexOf(".webp",a[0].length-5))return-1}return 0});e=m}else e=[];m=h.offsetWidth*window.devicePixelRatio;b=null;p=e.length;for(g=0;g=m){b=a;break}null===b&&(b=[l.getAttribute("src"),999999]);"undefined"===typeof h.lastSetOption&&(h.lastSetOption=["",0]);h.lastSetOption[1] img"),!1);c(document.querySelectorAll("img.responsively-lazy"),!0)}};if("srcset"in document.createElement("img")&&"undefined"!==typeof window.devicePixelRatio&&"undefined"!==typeof window.addEventListener&&"undefined"!==typeof document.querySelectorAll){var requestAnimationFrameFunction= +window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||function(c){window.setTimeout(c,1E3/60)},runIfHasChange=function(){responsivelyLazy.hasChange&&(responsivelyLazy.hasChange=!1,responsivelyLazy.run());requestAnimationFrameFunction.call(null,runIfHasChange)},setChanged=function(){responsivelyLazy.hasChange=!0},image=new Image;image.src="data:image/webp;base64,UklGRiQAAABXRUJQVlA4IBgAAAAwAQCdASoCAAEADMDOJaQAA3AA/uuuAAA=";image.onload=image.onerror=function(){responsivelyLazy.hasWebPSupport= +2===image.width;runIfHasChange();window.addEventListener("resize",setChanged);window.addEventListener("scroll",setChanged);window.addEventListener("load",setChanged)}}}; \ No newline at end of file