Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
loading-attribute-polyfill
Advanced tools
loading-attribute-polyfill - npm Package Compare versions
Comparing version 0.1.1 to 0.1.2
| { | ||
| "name": "loading-attribute-polyfill", | ||
| "version": "0.1.1", | ||
| "version": "0.1.2", | ||
| "description": "A minimal and dependency-free vanilla JavaScript polyfill for the awesome loading='lazy'-attribute.", | ||
| "main": "loading-attribute-polyfill.js", | ||
| "main": "loading-attribute-polyfill.min.js", | ||
| "repository": { | ||
@@ -7,0 +7,0 @@ "type": "git", |
@@ -1,3 +0,1 @@ | ||
| [npm]: https://npmjs.com/package/loading-attribute-polyfill 'loading="lazy"-attribute polyfill – on NPM' | ||
| # loading="lazy" attribute polyfill | ||
@@ -8,6 +6,8 @@ *Work in progress* | ||
| [][npm] | ||
| [][npm] | ||
| [](https://www.jsdelivr.com/package/npm/loading-attribute-polyfill 'loading-attribute polyfill – on jsDelivr') | ||
| [](https://github.com/prettier/prettier) | ||
| [](https://github.com/xojs/xo) | ||
| This is a minimal and dependency-free vanilla JavaScript polyfill for the awesome loading="lazy"-attribute, that will be a huge improve for todays web performance challenges. | ||
| Fast and lightweight vanilla JavaScript polyfill for the native behaviour to load elements right before they enter the viewport. Provides graceful degradation, and is - not just thatfor - SEO friendly. Handles images with srcset and within picture, as well as iframes. loading="lazy" will be a huge improve for todays web performance challenges, so use and polyfill it today! | ||
@@ -38,2 +38,86 @@ - Supports the standard loading="lazy" attribute | ||
| Afterwards you'll need to wrap all of your `<img>` and `<iframe>` HTML tags that you'd like to lazy load (and thatfor added a {{loading="lazy"}} attribute as well) by an `<iframe>` HTML tag: | ||
| ### Simple image | ||
| ```html | ||
| <noscript class="loading-lazy"> | ||
| <img | ||
| src="https://imgplaceholder.com/250x150/fbfbfb/0f0f0f?font-family=OpenSans_Bold&text=img_br_src_br_loading%3D%22lazy%22" | ||
| loading="lazy" | ||
| alt=".." | ||
| width="250" | ||
| height="150" | ||
| /> | ||
| </noscript> | ||
| ``` | ||
| ### Image wrapped in a picture tag | ||
| ```html | ||
| <picture> | ||
| <source | ||
| media="(min-width: 40em)" | ||
| srcset=" | ||
| https://imgplaceholder.com/250x150/fbfbfb/0f0f0f?font-family=OpenSans_Bold&text=picture_br_media+1x_br_loading%3D%22lazy%22 1x, | ||
| https://imgplaceholder.com/500x500/fbfbfb/0f0f0f?font-family=OpenSans_Bold&text=picture_br_media+2x_br_loading%3D%22lazy%22 2x | ||
| " | ||
| /> | ||
| <source | ||
| srcset=" | ||
| https://imgplaceholder.com/250x150/fbfbfb/0f0f0f?font-family=OpenSans_Bold&text=picture_br_1x_br_loading%3D%22lazy%22 1x, | ||
| https://imgplaceholder.com/500x500/fbfbfb/0f0f0f?font-family=OpenSans_Bold&text=picture_br_2x_br_loading%3D%22lazy%22 2x | ||
| " | ||
| /> | ||
| <noscript class="loading-lazy"> | ||
| <img | ||
| src="https://imgplaceholder.com/250x150/fbfbfb/0f0f0f?font-family=OpenSans_Bold&text=picture_br_img+src_br_loading%3D%22lazy%22" | ||
| loading="lazy" | ||
| alt=".." | ||
| width="250" | ||
| height="150" | ||
| /> | ||
| </noscript> | ||
| </picture> | ||
| ``` | ||
| ### Image with `srcset` | ||
| ```html | ||
| <noscript class="loading-lazy"> | ||
| <img | ||
| src="https://imgplaceholder.com/250x150/fbfbfb/0f0f0f?font-family=OpenSans_Bold&text=img_br_src_br_loading%3D%22lazy%22" | ||
| srcset=" | ||
| https://imgplaceholder.com/1024x400/fbfbfb/0f0f0f?font-family=OpenSans_Bold&text=img_br_srcset+1024w_br_loading%3D%22lazy%22 1024w, | ||
| https://imgplaceholder.com/640x400/fbfbfb/0f0f0f?font-family=OpenSans_Bold&text=img_br_srcset+640w_br_loading%3D%22lazy%22 640w, | ||
| https://imgplaceholder.com/320x320/fbfbfb/0f0f0f?font-family=OpenSans_Bold&text=img_br_srcset+320w_br_loading%3D%22lazy%22 320w | ||
| " | ||
| sizes="(min-width: 36em) 33.3vw, 100vw" | ||
| alt="A rad wolf" | ||
| loading="lazy" | ||
| /> | ||
| </noscript> | ||
| ``` | ||
| ### Iframe | ||
| ```html | ||
| <noscript class="loading-lazy"> | ||
| <iframe | ||
| src="https://player.vimeo.com/video/87110435" | ||
| width="320" | ||
| height="180" | ||
| loading="lazy" | ||
| ></iframe> | ||
| </noscript> | ||
| ``` | ||
| ## Optional additional dependencies | ||
| In case you'd like to support [older versions of Microsoft EDGE, Microsoft Internet Explorer 11 or Apple Safari up to 12.0](https://caniuse.com/#feat=intersectionobserver), you would could (conditionally) load an IntersectionObserver polyfill: | ||
| https://www.npmjs.com/package/intersection-observer | ||
| Nevertheless this polyfill would still work in those browsers without that other polyfill included, but [this small amount of users]((https://caniuse.com/#feat=intersectionobserver)) wouldn't totally benefit from the lazy loading functionality - we've at least got you partly covered by using the [Microsoft proprietary lazyloading resource hints](https://caniuse.com/#feat=lazyload). | ||
| ## API | ||
@@ -50,1 +134,3 @@ | ||
| - The demo HTML code is meant to be simple | ||
| [npm]: https://npmjs.com/package/loading-attribute-polyfill 'loading="lazy"-attribute polyfill – on NPM' |
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 by16.26%
25589
- Number of lines in readme file
- increased by179.17%
134
No dependency changes