lazysizes
Advanced tools
lazysizes - npm Package Compare versions
Comparing version 4.1.5 to 4.1.6
@@ -294,6 +294,4 @@ (function(window, factory) { | ||
| var eLvW, elvH, eLtop, eLleft, eLright, eLbottom; | ||
| var eLvW, elvH, eLtop, eLleft, eLright, eLbottom, isBodyHidden; | ||
| var defaultExpand, preloadExpand, hFac; | ||
| var regImg = /^img$/i; | ||
@@ -321,6 +319,14 @@ var regIframe = /^iframe$/i; | ||
| var isVisible = function (elem) { | ||
| if (isBodyHidden == null) { | ||
| isBodyHidden = getCSS(document.body, 'visibility') == 'hidden'; | ||
| } | ||
| return isBodyHidden || (getCSS(elem.parentNode, 'visibility') != 'hidden' && getCSS(elem, 'visibility') != 'hidden'); | ||
| }; | ||
| var isNestedVisible = function(elem, elemExpand){ | ||
| var outerRect; | ||
| var parent = elem; | ||
| var visible = getCSS(document.body, 'visibility') == 'hidden' || (getCSS(elem.parentNode, 'visibility') != 'hidden' && getCSS(elem, 'visibility') != 'hidden'); | ||
| var visible = isVisible(elem); | ||
@@ -349,4 +355,4 @@ eLtop -= elemExpand; | ||
| var checkElements = function() { | ||
| var eLlen, i, rect, autoLoadElem, loadedSomething, elemExpand, elemNegativeExpand, elemExpandVal, beforeExpandVal; | ||
| var eLlen, i, rect, autoLoadElem, loadedSomething, elemExpand, elemNegativeExpand, elemExpandVal, | ||
| beforeExpandVal, defaultExpand, preloadExpand, hFac; | ||
| var lazyloadElems = lazysizes.elements; | ||
@@ -360,10 +366,9 @@ | ||
| if(preloadExpand == null){ | ||
| if(!('expand' in lazySizesConfig)){ | ||
| lazySizesConfig.expand = docElem.clientHeight > 500 && docElem.clientWidth > 500 ? 500 : 370; | ||
| } | ||
| defaultExpand = (!lazySizesConfig.expand || lazySizesConfig.expand < 1) ? | ||
| docElem.clientHeight > 500 && docElem.clientWidth > 500 ? 500 : 370 : | ||
| lazySizesConfig.expand; | ||
| defaultExpand = lazySizesConfig.expand; | ||
| preloadExpand = defaultExpand * lazySizesConfig.expFactor; | ||
| } | ||
| preloadExpand = defaultExpand * lazySizesConfig.expFactor; | ||
| hFac = lazySizesConfig.hFac; | ||
| isBodyHidden = null; | ||
@@ -403,3 +408,3 @@ if(currentExpand < preloadExpand && isLoading < 1 && lowRuns > 2 && loadMode > 2 && !document.hidden){ | ||
| (eLbottom || eLright || eLleft || eLtop) && | ||
| (lazySizesConfig.loadHidden || getCSS(lazyloadElems[i], 'visibility') != 'hidden') && | ||
| (lazySizesConfig.loadHidden || isVisible(lazyloadElems[i])) && | ||
| ((isCompleted && isLoading < 3 && !elemExpandVal && (loadMode < 3 || lowRuns < 4)) || isNestedVisible(lazyloadElems[i], elemExpand))){ | ||
@@ -582,3 +587,2 @@ unveilElement(lazyloadElems[i]); | ||
| preloadElems = document.getElementsByClassName(lazySizesConfig.lazyClass + ' ' + lazySizesConfig.preloadClass); | ||
| hFac = lazySizesConfig.hFac; | ||
@@ -585,0 +589,0 @@ addEventListener('scroll', throttledCheckElements, true); |
@@ -291,6 +291,4 @@ (function(window, factory) { | ||
| var eLvW, elvH, eLtop, eLleft, eLright, eLbottom; | ||
| var eLvW, elvH, eLtop, eLleft, eLright, eLbottom, isBodyHidden; | ||
| var defaultExpand, preloadExpand, hFac; | ||
| var regImg = /^img$/i; | ||
@@ -318,6 +316,14 @@ var regIframe = /^iframe$/i; | ||
| var isVisible = function (elem) { | ||
| if (isBodyHidden == null) { | ||
| isBodyHidden = getCSS(document.body, 'visibility') == 'hidden'; | ||
| } | ||
| return isBodyHidden || (getCSS(elem.parentNode, 'visibility') != 'hidden' && getCSS(elem, 'visibility') != 'hidden'); | ||
| }; | ||
| var isNestedVisible = function(elem, elemExpand){ | ||
| var outerRect; | ||
| var parent = elem; | ||
| var visible = getCSS(document.body, 'visibility') == 'hidden' || (getCSS(elem.parentNode, 'visibility') != 'hidden' && getCSS(elem, 'visibility') != 'hidden'); | ||
| var visible = isVisible(elem); | ||
@@ -346,4 +352,4 @@ eLtop -= elemExpand; | ||
| var checkElements = function() { | ||
| var eLlen, i, rect, autoLoadElem, loadedSomething, elemExpand, elemNegativeExpand, elemExpandVal, beforeExpandVal; | ||
| var eLlen, i, rect, autoLoadElem, loadedSomething, elemExpand, elemNegativeExpand, elemExpandVal, | ||
| beforeExpandVal, defaultExpand, preloadExpand, hFac; | ||
| var lazyloadElems = lazysizes.elements; | ||
@@ -357,10 +363,9 @@ | ||
| if(preloadExpand == null){ | ||
| if(!('expand' in lazySizesConfig)){ | ||
| lazySizesConfig.expand = docElem.clientHeight > 500 && docElem.clientWidth > 500 ? 500 : 370; | ||
| } | ||
| defaultExpand = (!lazySizesConfig.expand || lazySizesConfig.expand < 1) ? | ||
| docElem.clientHeight > 500 && docElem.clientWidth > 500 ? 500 : 370 : | ||
| lazySizesConfig.expand; | ||
| defaultExpand = lazySizesConfig.expand; | ||
| preloadExpand = defaultExpand * lazySizesConfig.expFactor; | ||
| } | ||
| preloadExpand = defaultExpand * lazySizesConfig.expFactor; | ||
| hFac = lazySizesConfig.hFac; | ||
| isBodyHidden = null; | ||
@@ -400,3 +405,3 @@ if(currentExpand < preloadExpand && isLoading < 1 && lowRuns > 2 && loadMode > 2 && !document.hidden){ | ||
| (eLbottom || eLright || eLleft || eLtop) && | ||
| (lazySizesConfig.loadHidden || getCSS(lazyloadElems[i], 'visibility') != 'hidden') && | ||
| (lazySizesConfig.loadHidden || isVisible(lazyloadElems[i])) && | ||
| ((isCompleted && isLoading < 3 && !elemExpandVal && (loadMode < 3 || lowRuns < 4)) || isNestedVisible(lazyloadElems[i], elemExpand))){ | ||
@@ -579,3 +584,2 @@ unveilElement(lazyloadElems[i]); | ||
| preloadElems = document.getElementsByClassName(lazySizesConfig.lazyClass + ' ' + lazySizesConfig.preloadClass); | ||
| hFac = lazySizesConfig.hFac; | ||
@@ -582,0 +586,0 @@ addEventListener('scroll', throttledCheckElements, true); |
| { | ||
| "name": "lazysizes", | ||
| "version": "4.1.5", | ||
| "version": "4.1.6", | ||
| "filename": "lazysizes.min.js", | ||
@@ -5,0 +5,0 @@ "license": "MIT", |
@@ -5,9 +5,9 @@ # lazysizes aspectratio extension | ||
| Note: The CSS patterns are recommended, but especially in case of different ratio's for art directed images not so convenient. | ||
| Note: The CSS patterns are recommended, but especially in case of different ratio's for art directed images not so convenient. This plugin removes the ``data-aspectratio`` attribute after processing each image and my not play well with other plugins that rely on this attribute. | ||
| ## Markup API: | ||
| The value of the ``data-aspectratio`` has to be defined as the *width* divided by the *height* of the image. | ||
| The value of the ``data-aspectratio`` has to be defined as the *width* divided by the *height* of the image and can be represented as a ratio or a floating point number. | ||
| Example values for an image with a width of 400 and a height of 200 (all mean the same): ``"400/200"``, ``"4/2"``, ``"2/1"``, ``"2"`` | ||
| Example values for an image with a width of 400 and a height of 200 (all mean the same): ``"400/200"``, ``"4/2"``, ``"2/1"``, ``"2"``, ``"2.0"`` | ||
@@ -14,0 +14,0 @@ ```html |
@@ -62,3 +62,2 @@ # The lazysizes Blur Up/effect plugin plugin | ||
| class="mediabox-img lazyload" | ||
| src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" | ||
| data-srcset="https://picsum.photos/400/600?image=1074 600w 400h, | ||
@@ -65,0 +64,0 @@ https://picsum.photos/800/1200?image=1074 1200w" |
@@ -48,3 +48,3 @@ # lazysizes | ||
| Lazysizes is built upon the Responsive image standard and extends it with additional functionality. For full cross browser responsive image support you must use either a full polyfill like [picturefill](https://github.com/scottjehl/picturefill) or use the extreme lightweight partial [respimg polyfill plugin](plugins/respimg) or the [responsive image on demand plugin](plugins/rias). Alternatively you can simply define a fallback src via the ``data-src`` attribute. If you want to learn more about the responsive image syntax read "[The anatomy of responsive images](https://jakearchibald.com/2015/anatomy-of-responsive-images/)". | ||
| Lazysizes is built upon the Responsive image standard and extends it with additional functionality. For full cross browser responsive image support you must use either a full polyfill like [picturefill](https://github.com/scottjehl/picturefill) or use the extreme lightweight partial [respimg polyfill plugin](plugins/respimg) or the [responsive image on demand plugin](plugins/rias). Alternatively, you can simply define a fallback src via the ``data-src`` attribute. If you want to learn more about the responsive image syntax read "[The anatomy of responsive images](https://jakearchibald.com/2015/anatomy-of-responsive-images/)". | ||
@@ -237,3 +237,3 @@ ## What makes lazysizes so awesome: | ||
| Additionally this general option can be overridden with the ``data-expand`` attribute for each element. Different than the general ``expand`` option the ``data-expand`` attribute also accepts negative values (All numbers but ``0`` are accepted!). | ||
| Additionally, this general option can be overridden with the ``data-expand`` attribute for each element. Different than the general ``expand`` option the ``data-expand`` attribute also accepts negative values (All numbers but ``0`` are accepted!). | ||
@@ -322,5 +322,5 @@ This becomes especially handy to add unveiling effects for teasers or other elements: | ||
| * ``lazySizesConfig.srcsetAttr`` (default: ``"data-srcset"``): The attribute, which should be transformed to ``srcset``. | ||
| * ``lazySizesConfig.sizesAttr`` (default: ``"data-sizes"``): The attribute, which should be transformed to ``sizes``. Makes almost only makes sense with the value ``"auto"``. Otherwise the ``sizes`` attribute should be used directly. | ||
| * ``lazySizesConfig.sizesAttr`` (default: ``"data-sizes"``): The attribute, which should be transformed to ``sizes``. Makes almost only makes sense with the value ``"auto"``. Otherwise, the ``sizes`` attribute should be used directly. | ||
| * ``lazySizesConfig.customMedia`` (default: ``{}``): The ``customMedia`` option object is an alias map for different media queries. It can be used to separate/centralize your multiple specific media queries implementation (layout) from the ``source[media]`` attribute (content/structure) by creating labeled media queries. (See also the [custommedia extension](plugins/custommedia)). | ||
| * ``lazySizesConfig.loadHidden`` (default: ``true``): Wether to load `visibility: hidden` elements. Important: lazySizes will load hidden images always delayed. If you want them to be loaded as fast as possible you can use `opacity: 0.001` but never `visibility: hidden` or `opacity: 0`. | ||
| * ``lazySizesConfig.loadHidden`` (default: ``true``): Whether to load `visibility: hidden` elements. Important: lazySizes will load hidden images always delayed. If you want them to be loaded as fast as possible you can use `opacity: 0.001` but never `visibility: hidden` or `opacity: 0`. | ||
| * ``lazySizesConfig.ricTimeout`` (default: ``0``): The timeout option used for the `requestIdleCallback`. Reasonable values between: 0, 100 - 1000. (Values below 50 disable the `requestIdleCallback` feature.) | ||
@@ -415,3 +415,3 @@ * ``lazySizesConfig.throttleDelay`` (default: ``125``): The timeout option used to throttle all listeners. Reasonable values between: 66 - 200. | ||
| ``` | ||
| *<a id="lazyloaded-documentation"></a>`lazyloaded`: After the image is fully loaded lazysizes dispatches a `lazyloaded` event. While this often duplicates the native `load` event it is often more convenient to use. | ||
| * <a id="lazyloaded-documentation"></a>`lazyloaded`: After the image is fully loaded lazysizes dispatches a `lazyloaded` event. While this often duplicates the native `load` event it is often more convenient to use. | ||
@@ -641,3 +641,3 @@ * <a id="lazybeforesizes-documentation"></a>``lazybeforesizes``: This event will be fired on each element with the ``data-sizes="auto"`` attribute right before the calculated ``sizes`` attribute will be set. The ``event.detail.width`` property is set to the calculated width of the element and can be changed to any number. In case the event is ``defaultPrevented`` the ``sizes`` attribute won't be set. See also the [parent-fit extension](plugins/parent-fit). | ||
| * If you use the "unknown intrinsic ratio pattern" and the width of the loaded image will not (approximately) match the width of its container, the ``data-sizes="auto"`` feature will not be effective when used on its own. In this situation the most appropriate size for the image to fit in the available space can be calculated automatically using the [parent fit plugin](plugins/parent-fit). | ||
| * If you use the "unknown intrinsic ratio pattern" and the width of the loaded image will not (approximately) match the width of its container, the ``data-sizes="auto"`` feature will not be effective when used on its own. In this situation, the most appropriate size for the image to fit in the available space can be calculated automatically using the [parent fit plugin](plugins/parent-fit). | ||
| * see also the [aspectratio extension](plugins/aspectratio) for an alternative way to add aspectratio. | ||
@@ -673,3 +673,3 @@ | ||
| ## Why lazysizes | ||
| In the past I often struggled using lazy image loaders, because the "main check function" is called repeatedly and with a high frequency. Which makes it hard to fulfill two purposes runtime and memory efficiency. And looking into the source code of most so called lazy loaders often also unveils lazy developers... | ||
| In the past, I often struggled using lazy image loaders, because the "main check function" is called repeatedly and with a high frequency. Which makes it hard to fulfill two purposes runtime and memory efficiency. And looking into the source code of most so called lazy loaders often also unveils lazy developers... | ||
@@ -676,0 +676,0 @@ But in a world of responsive retina optimized images on the one hand and JS widgets like carousels or tabs (a lot of initially hidden images) on the other hand lazy loading images becomes more and more important, so I created this project. |
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
Minified code
QualityThis package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.
Found 1 instance in 1 package
Improved metrics
- Number of low quality alerts
- decreased by-95.45%
1
Worsened metrics
- Total package byte prevSize
- decreased by-27.68%
236716
- Number of package files
- decreased by-36.49%
47
- Lines of code
- decreased by-19.44%
4127
No dependency changes