Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
object-fit-images
Advanced tools
object-fit-images - npm Package Compare versions
Comparing version 3.0.1 to 3.1.0
| # Changelog | ||
| * 3.1.0 Use SVG as a size placeholder instead of canvas | ||
| * 3.0.0 Improved edge cases with `srcset`, `currentSrc`, unsetting `object-fit`, ... | ||
@@ -4,0 +5,0 @@ * 2.5.0 Add support `object-position` where `object-fit` is supported |
@@ -7,6 +7,5 @@ /*! npm.im/object-fit-images */ | ||
| var testImg = new Image(); | ||
| var placeholder = document.createElement('canvas'); | ||
| var supportsObjectFit = 'object-fit' in testImg.style; | ||
| var supportsObjectPosition = 'object-position' in testImg.style; | ||
| var supportsOFI = 'background-size' in testImg.style && window.HTMLCanvasElement; | ||
| var supportsOFI = 'background-size' in testImg.style; | ||
| var supportsCurrentSrc = typeof testImg.currentSrc === 'string'; | ||
@@ -17,2 +16,6 @@ var nativeGetAttribute = testImg.getAttribute; | ||
| function createPlaceholder(w, h) { | ||
| return ("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='" + w + "' height='" + h + "'%3E%3C/svg%3E"); | ||
| } | ||
| function polyfillCurrentSrc(el) { | ||
@@ -49,9 +52,8 @@ if (el.srcset && !supportsCurrentSrc && window.picturefill) { | ||
| function setPlaceholder(img, width, height) { | ||
| placeholder.width = width || 1; | ||
| placeholder.height = height || 1; | ||
| if (img[OFI].width !== placeholder.width || img[OFI].height !== placeholder.height) { | ||
| // cache size to avoid unnecessary changes | ||
| img[OFI].width = placeholder.width; | ||
| img[OFI].height = placeholder.height; | ||
| nativeSetAttribute.call(img, 'src', placeholder.toDataURL()); | ||
| // Default: fill width, no height | ||
| var placeholder = createPlaceholder(width || 1, height || 0); | ||
| // Only set placeholder if it's different | ||
| if (nativeGetAttribute.call(img, 'src') !== placeholder) { | ||
| nativeSetAttribute.call(img, 'src', placeholder); | ||
| } | ||
@@ -101,3 +103,5 @@ } | ||
| nativeSetAttribute.call(el, "data-ofi-src", el.src); | ||
| nativeSetAttribute.call(el, "data-ofi-srcset", el.srcset); | ||
| if (el.srcset) { | ||
| nativeSetAttribute.call(el, "data-ofi-srcset", el.srcset); | ||
| } | ||
@@ -183,2 +187,3 @@ setPlaceholder(el, el.naturalWidth || el.width, el.naturalHeight || el.height); | ||
| imgs = imgs || 'img'; | ||
| if ((supportsObjectPosition && !opts.skipTest) || !supportsOFI) { | ||
@@ -185,0 +190,0 @@ return false; |
@@ -5,6 +5,5 @@ /*! npm.im/object-fit-images */ | ||
| var testImg = new Image(); | ||
| var placeholder = document.createElement('canvas'); | ||
| var supportsObjectFit = 'object-fit' in testImg.style; | ||
| var supportsObjectPosition = 'object-position' in testImg.style; | ||
| var supportsOFI = 'background-size' in testImg.style && window.HTMLCanvasElement; | ||
| var supportsOFI = 'background-size' in testImg.style; | ||
| var supportsCurrentSrc = typeof testImg.currentSrc === 'string'; | ||
@@ -15,2 +14,6 @@ var nativeGetAttribute = testImg.getAttribute; | ||
| function createPlaceholder(w, h) { | ||
| return ("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='" + w + "' height='" + h + "'%3E%3C/svg%3E"); | ||
| } | ||
| function polyfillCurrentSrc(el) { | ||
@@ -47,9 +50,8 @@ if (el.srcset && !supportsCurrentSrc && window.picturefill) { | ||
| function setPlaceholder(img, width, height) { | ||
| placeholder.width = width || 1; | ||
| placeholder.height = height || 1; | ||
| if (img[OFI].width !== placeholder.width || img[OFI].height !== placeholder.height) { | ||
| // cache size to avoid unnecessary changes | ||
| img[OFI].width = placeholder.width; | ||
| img[OFI].height = placeholder.height; | ||
| nativeSetAttribute.call(img, 'src', placeholder.toDataURL()); | ||
| // Default: fill width, no height | ||
| var placeholder = createPlaceholder(width || 1, height || 0); | ||
| // Only set placeholder if it's different | ||
| if (nativeGetAttribute.call(img, 'src') !== placeholder) { | ||
| nativeSetAttribute.call(img, 'src', placeholder); | ||
| } | ||
@@ -99,3 +101,5 @@ } | ||
| nativeSetAttribute.call(el, "data-ofi-src", el.src); | ||
| nativeSetAttribute.call(el, "data-ofi-srcset", el.srcset); | ||
| if (el.srcset) { | ||
| nativeSetAttribute.call(el, "data-ofi-srcset", el.srcset); | ||
| } | ||
@@ -181,2 +185,3 @@ setPlaceholder(el, el.naturalWidth || el.width, el.naturalHeight || el.height); | ||
| imgs = imgs || 'img'; | ||
| if ((supportsObjectPosition && !opts.skipTest) || !supportsOFI) { | ||
@@ -183,0 +188,0 @@ return false; |
@@ -8,6 +8,5 @@ /*! npm.im/object-fit-images */ | ||
| var testImg = new Image(); | ||
| var placeholder = document.createElement('canvas'); | ||
| var supportsObjectFit = 'object-fit' in testImg.style; | ||
| var supportsObjectPosition = 'object-position' in testImg.style; | ||
| var supportsOFI = 'background-size' in testImg.style && window.HTMLCanvasElement; | ||
| var supportsOFI = 'background-size' in testImg.style; | ||
| var supportsCurrentSrc = typeof testImg.currentSrc === 'string'; | ||
@@ -18,2 +17,6 @@ var nativeGetAttribute = testImg.getAttribute; | ||
| function createPlaceholder(w, h) { | ||
| return ("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='" + w + "' height='" + h + "'%3E%3C/svg%3E"); | ||
| } | ||
| function polyfillCurrentSrc(el) { | ||
@@ -50,9 +53,8 @@ if (el.srcset && !supportsCurrentSrc && window.picturefill) { | ||
| function setPlaceholder(img, width, height) { | ||
| placeholder.width = width || 1; | ||
| placeholder.height = height || 1; | ||
| if (img[OFI].width !== placeholder.width || img[OFI].height !== placeholder.height) { | ||
| // cache size to avoid unnecessary changes | ||
| img[OFI].width = placeholder.width; | ||
| img[OFI].height = placeholder.height; | ||
| nativeSetAttribute.call(img, 'src', placeholder.toDataURL()); | ||
| // Default: fill width, no height | ||
| var placeholder = createPlaceholder(width || 1, height || 0); | ||
| // Only set placeholder if it's different | ||
| if (nativeGetAttribute.call(img, 'src') !== placeholder) { | ||
| nativeSetAttribute.call(img, 'src', placeholder); | ||
| } | ||
@@ -102,3 +104,5 @@ } | ||
| nativeSetAttribute.call(el, "data-ofi-src", el.src); | ||
| nativeSetAttribute.call(el, "data-ofi-srcset", el.srcset); | ||
| if (el.srcset) { | ||
| nativeSetAttribute.call(el, "data-ofi-srcset", el.srcset); | ||
| } | ||
@@ -184,2 +188,3 @@ setPlaceholder(el, el.naturalWidth || el.width, el.naturalHeight || el.height); | ||
| imgs = imgs || 'img'; | ||
| if ((supportsObjectPosition && !opts.skipTest) || !supportsOFI) { | ||
@@ -186,0 +191,0 @@ return false; |
| /*! npm.im/object-fit-images */ | ||
| var objectFitImages=function(){"use strict";function t(t){if(t.srcset&&!m&&window.picturefill){var e=window.picturefill._;t[e.ns]&&t[e.ns].evaled||e.fillImg(t,{reselect:!0}),t[e.ns].curSrc||(t[e.ns].supported=!1,e.fillImg(t,{reselect:!0})),t.currentSrc=t[e.ns].curSrc||t.src}}function e(t){for(var e,i=getComputedStyle(t).fontFamily,r={};null!==(e=l.exec(i));)r[e[1]]=e[2];return r}function i(t,e,i){g.width=e||1,g.height=i||1,t[a].width===g.width&&t[a].height===g.height||(t[a].width=g.width,t[a].height=g.height,b.call(t,"src",g.toDataURL()))}function r(t,e){t.naturalWidth?e(t):setTimeout(r,100,t,e)}function n(n){var s=e(n),o=n[a];if(s["object-fit"]=s["object-fit"]||"fill",!o.img){if("fill"===s["object-fit"])return;if(!o.skipTest&&f&&!s["object-position"])return}if(!o.img){o.img=new Image(n.width,n.height),o.img.srcset=p.call(n,"data-ofi-srcset")||n.srcset,o.img.src=p.call(n,"data-ofi-src")||n.src,b.call(n,"data-ofi-src",n.src),b.call(n,"data-ofi-srcset",n.srcset),i(n,n.naturalWidth||n.width,n.naturalHeight||n.height),n.srcset&&(n.srcset="");try{c(n)}catch(t){window.console&&console.log("http://bit.ly/ofi-old-browser")}}t(o.img),n.style.backgroundImage="url("+(o.img.currentSrc||o.img.src).replace("(","%28").replace(")","%29")+")",n.style.backgroundPosition=s["object-position"]||"center",n.style.backgroundRepeat="no-repeat",/scale-down/.test(s["object-fit"])?r(o.img,function(){o.img.naturalWidth>n.width||o.img.naturalHeight>n.height?n.style.backgroundSize="contain":n.style.backgroundSize="auto"}):n.style.backgroundSize=s["object-fit"].replace("none","auto").replace("fill","100% 100%"),r(o.img,function(t){i(n,t.naturalWidth,t.naturalHeight)})}function c(t){var e={get:function(e){return t[a].img[e?e:"src"]},set:function(e,i){return t[a].img[i?i:"src"]=e,b.call(t,"data-ofi-"+i,e),n(t),e}};Object.defineProperty(t,"src",e),Object.defineProperty(t,"currentSrc",{get:function(){return e.get("currentSrc")}}),Object.defineProperty(t,"srcset",{get:function(){return e.get("srcset")},set:function(t){return e.set(t,"srcset")}})}function s(){function t(t,e){return t[a]&&t[a].img&&("src"===e||"srcset"===e)?t[a].img:t}d||(HTMLImageElement.prototype.getAttribute=function(e){return p.call(t(this,e),e)},HTMLImageElement.prototype.setAttribute=function(e,i){return b.call(t(this,e),e,String(i))})}function o(t,e){var i=!w&&!t;if(e=e||{},t=t||"img",d&&!e.skipTest||!h)return!1;"string"==typeof t?t=document.querySelectorAll(t):"length"in t||(t=[t]);for(var r=0;r<t.length;r++)t[r][a]=t[r][a]||{skipTest:e.skipTest},n(t[r]);i&&(document.body.addEventListener("load",function(t){"IMG"===t.target.tagName&&o(t.target,{skipTest:e.skipTest})},!0),w=!0,t="img"),e.watchMQ&&window.addEventListener("resize",o.bind(null,t,{skipTest:e.skipTest}))}var a="bfred-it:object-fit-images",l=/(object-fit|object-position)\s*:\s*([-\w\s%]+)/g,u=new Image,g=document.createElement("canvas"),f="object-fit"in u.style,d="object-position"in u.style,h="background-size"in u.style&&window.HTMLCanvasElement,m="string"==typeof u.currentSrc,p=u.getAttribute,b=u.setAttribute,w=!1;return o.supportsObjectFit=f,o.supportsObjectPosition=d,s(),o}(); | ||
| var objectFitImages=function(){"use strict";function t(t,e){return"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='"+t+"' height='"+e+"'%3E%3C/svg%3E"}function e(t){if(t.srcset&&!p&&window.picturefill){var e=window.picturefill._;t[e.ns]&&t[e.ns].evaled||e.fillImg(t,{reselect:!0}),t[e.ns].curSrc||(t[e.ns].supported=!1,e.fillImg(t,{reselect:!0})),t.currentSrc=t[e.ns].curSrc||t.src}}function i(t){for(var e,i=getComputedStyle(t).fontFamily,r={};null!==(e=u.exec(i));)r[e[1]]=e[2];return r}function r(e,i,r){var n=t(i||1,r||0);b.call(e,"src")!==n&&h.call(e,"src",n)}function n(t,e){t.naturalWidth?e(t):setTimeout(n,100,t,e)}function c(t){var c=i(t),o=t[l];if(c["object-fit"]=c["object-fit"]||"fill",!o.img){if("fill"===c["object-fit"])return;if(!o.skipTest&&f&&!c["object-position"])return}if(!o.img){o.img=new Image(t.width,t.height),o.img.srcset=b.call(t,"data-ofi-srcset")||t.srcset,o.img.src=b.call(t,"data-ofi-src")||t.src,h.call(t,"data-ofi-src",t.src),t.srcset&&h.call(t,"data-ofi-srcset",t.srcset),r(t,t.naturalWidth||t.width,t.naturalHeight||t.height),t.srcset&&(t.srcset="");try{s(t)}catch(t){window.console&&console.log("http://bit.ly/ofi-old-browser")}}e(o.img),t.style.backgroundImage="url("+(o.img.currentSrc||o.img.src).replace("(","%28").replace(")","%29")+")",t.style.backgroundPosition=c["object-position"]||"center",t.style.backgroundRepeat="no-repeat",/scale-down/.test(c["object-fit"])?n(o.img,function(){o.img.naturalWidth>t.width||o.img.naturalHeight>t.height?t.style.backgroundSize="contain":t.style.backgroundSize="auto"}):t.style.backgroundSize=c["object-fit"].replace("none","auto").replace("fill","100% 100%"),n(o.img,function(e){r(t,e.naturalWidth,e.naturalHeight)})}function s(t){var e={get:function(e){return t[l].img[e?e:"src"]},set:function(e,i){return t[l].img[i?i:"src"]=e,h.call(t,"data-ofi-"+i,e),c(t),e}};Object.defineProperty(t,"src",e),Object.defineProperty(t,"currentSrc",{get:function(){return e.get("currentSrc")}}),Object.defineProperty(t,"srcset",{get:function(){return e.get("srcset")},set:function(t){return e.set(t,"srcset")}})}function o(){function t(t,e){return t[l]&&t[l].img&&("src"===e||"srcset"===e)?t[l].img:t}d||(HTMLImageElement.prototype.getAttribute=function(e){return b.call(t(this,e),e)},HTMLImageElement.prototype.setAttribute=function(e,i){return h.call(t(this,e),e,String(i))})}function a(t,e){var i=!w&&!t;if(e=e||{},t=t||"img",d&&!e.skipTest||!m)return!1;"string"==typeof t?t=document.querySelectorAll(t):"length"in t||(t=[t]);for(var r=0;r<t.length;r++)t[r][l]=t[r][l]||{skipTest:e.skipTest},c(t[r]);i&&(document.body.addEventListener("load",function(t){"IMG"===t.target.tagName&&a(t.target,{skipTest:e.skipTest})},!0),w=!0,t="img"),e.watchMQ&&window.addEventListener("resize",a.bind(null,t,{skipTest:e.skipTest}))}var l="bfred-it:object-fit-images",u=/(object-fit|object-position)\s*:\s*([-\w\s%]+)/g,g=new Image,f="object-fit"in g.style,d="object-position"in g.style,m="background-size"in g.style,p="string"==typeof g.currentSrc,b=g.getAttribute,h=g.setAttribute,w=!1;return a.supportsObjectFit=f,a.supportsObjectPosition=d,o(),a}(); |
| { | ||
| "name": "object-fit-images", | ||
| "version": "3.0.1", | ||
| "version": "3.1.0", | ||
| "description": "Polyfill object-fit and object-position on images on IE9, IE10, IE11, Edge, Safari, ...", | ||
@@ -5,0 +5,0 @@ "license": "MIT", |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by0.28%
37187
- Lines of code
- increased by1.01%
603
No dependency changes