Fast and lightweight dependency-free vanilla JavaScript polyfill for native lazy loading / the awesome loading='lazy'-attribute.

Overview

loading="lazy" attribute polyfill

Financial Contributors on Open Collective MIT license npm bundle size Total downloads ~ Npmjs jsDelivr CDN downloads Codacy Badge Known Vulnerabilities CodeQL GitHub Super-Linter Dependencies Status loading-attribute-polyfill on Npmjs code style: prettier XO code style Conventional Commits Join the chat at https://gitter.im/loading-attribute-polyfill/community PRs Welcome Open Source Love Contributor Covenant

Fast and lightweight vanilla JavaScript polyfill for native lazy loading, meaning the 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 iframe elements. loading="lazy" will be a huge improvement for todays web performance challenges, so use and polyfill it today!

  • Released under the MIT license
  • Made in Germany. And supported by so many great people from all over this planet - see "Credits" accordingly.
  • Compatible down to Microsoft Internet Explorer 9

Features

  • Lightweight (see the badge above)
  • Web standards: supports the standard loading="lazy" attribute on img and iframe elements
  • Performance: it's based on highly efficient, best practice code.
  • SEO & crawlers: the image and iframe contents aren't being hidden from crawlers that aren't capable of scrolling.
  • Supporting HTML generating JavaScript frameworks through a method provided to reinit its functionality (see "Another solution, especially in combination with JavaScript framework usage" as well)

Core concepts

The polyfill was designed with the following concepts kept in mind:

  • dependency-free
  • using JavaScript with graceful degradation

Another solution, especially in combination with JavaScript framework usage

We're even also providing another solution, which main architectural decision is that we're using Service Worker to intercept the image and iframe contents network requests there. This comes with some aspects that are important to mention, that might be either acceptable (have a look at the other solution) or not (stay with this one) on your requirements and technical context.

  • Service Workers only run over HTTPS, for security reasons
  • Service Worker need to get registered on first page visit
  • Only works on same domain network requests

Whereas the first topic might not be a problem (anymore) on most websites – as this should be the de-facto standard nowadays – the second and third might be acceptable in your context, as this polyfill behaves as a progressive enhancement to provide the expected functionality even for non-supporting browsers both only on seconds pages request and any revisits and for same origin image and contents (iframe) requests even only.

Installation

First you'll need to integrate the JavaScript file into your code.

You may optionally load via NPM or Bower:

$ npm install loading-attribute-polyfill
$ bower install loading-attribute-polyfill

You could load the polyfill asynchronously as well: https://output.jsbin.com/codelib/1

Integration

Include one of the provided JavaScript files depending on your setup plus the CSS file:

<link rel="stylesheet" href="dist/loading-attribute-polyfill.css" />
<script src="dist/loading-attribute-polyfill.umd.js" async></script>

or e.g. within JS

import loadingAttributePolyfill from "node_modules/loading-attribute-polyfill/dist/loading-attribute-polyfill.module.js";

Afterwards, you need to wrap all of your <img> and <iframe> HTML tags (in the case of <picture> use the complementary <source> HTML tags) that you'd like to lazy load with a <noscript> HTML tag (with the attribute class="loading-lazy".)

Please keep in mind that it's important to even also include width and height attributes on <img> HTML tags, as the browser could determine the aspect ratio via those two attributes values being set (even if you overwrite them via CSS), compare to the great work by Jen Simmons on this topic, e.g. within these articles https://css-tricks.com/do-this-to-improve-image-loading-on-your-website/ (with video) or https://css-tricks.com/what-if-we-got-aspect-ratio-sized-images-by-doing-almost-nothing/

And please "Avoid lazy-loading images that are in the first visible viewport", compare to the article "Browser-level image lazy-loading for the web" published on web.dev:

You should avoid setting loading=lazy for any images that are in the first visible viewport. It is recommended to only add loading=lazy to images which are positioned below the fold, if possible.

Simple image

<noscript class="loading-lazy">
	<img src="simpleimage.jpg" loading="lazy" alt=".." width="250" height="150" />
</noscript>

Image wrapped in a picture tag

<noscript class="loading-lazy">
	<picture>
		<source
			media="(min-width: 40em)"
			srcset="simpleimage.huge.jpg 1x, simpleimage.huge.2x.jpg 2x"
		/>
		<source srcset="simpleimage.jpg 1x, simpleimage.2x.jpg 2x" />
		<img
			src="simpleimage.jpg"
			loading="lazy"
			alt=".."
			width="250"
			height="150"
		/>
	</picture>
</noscript>

Image with srcset

<noscript class="loading-lazy">
	<img
		src="simpleimage.jpg"
		srcset="
			simpleimage.1024.jpg 1024w,
			simpleimage.640.jpg   640w,
			simpleimage.320.jpg   320w
		"
		sizes="(min-width: 36em) 33.3vw, 100vw"
		alt="A rad wolf"
		loading="lazy"
	/>
</noscript>

Iframe

<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, you 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 wouldn't totally benefit from the lazy loading functionality - we've at least got you partly covered by using the Microsoft proprietary lazy loading resource hints.

Internet Explorer 9 & Internet Explorer 10

Internet Explorer 9 and 10 have bugs where the 'interactive' state can be fired too early before the document has finished parsing.

Source: https://developer.mozilla.org/en-US/docs/Web/API/Document/readyState

That for you would need to include the polyfill the latest within the HTML code, like the nearest to the closing body HTML tag, as including it e.g. within the head section might lead to an unexpected state, so that in worst case the images might not get loaded.

Internet Explorer 9

The polyfill has been enhanced to even also provide it's functionality on IE9. But please keep in mind to even also include a matchMedia polyfill.

And the images are still displaying an error in the demo on IE9, as most likely (from my understanding) this browser doesn't work with the HTTPS protocol by GitHub pages any more, but the src-attributes values are correctly rewritten after all.

API

In case that you're dynamically adding HTML elements within the browser, you could call the following method with an included HTMLElement object, like e.g.:

loadingAttributePolyfill.prepareElement(document.querySelector('main noscript.loading-lazy'));

Demo

See the polyfill in action either by downloading / forking this repository and have a look at demo/index.html, or at the hosted demo: https://mfranzke.github.io/loading-attribute-polyfill/demo/

Further implementations - Kudos for that

WordPress

Nico23 has developed a WordPress plugin: https://wordpress.org/plugins/native-lazyload-polyfill/ (which is much better than the one by Google !)

PHP Twig Extension

@tim-thaler has developed a PHP Twig Extension: https://github.com/tim-thaler/twig-loading-lazy

Craft Twig Loading Lazy plugin

@tim-thaler has even also developed a Craft Twig Loading Lazy plugin: https://github.com/tim-thaler/craft-twig-loading-lazy

Credits

Credits for the initial kickstarter / script to @Sora2455 for better expressing my ideas & concepts and support by @cbirdsong, @eklingen, @DaPo, @nextgenthemes, @diogoterremoto, @dracos, @Flimm, @TomS-, @vinyfc93, @JordanDysart and @denyshutsal. Thank you very much for that, highly appreciated !

Tested with

  • Mac

    • Safari 14, macOS 11 (via CrossBrowserTesting)
    • Mozilla Firefox latest, macOS 10.14 (manually, localhost)
  • iOS

    • Mobile Safari 12.0, iPad 6th Generation Simulator (manually)
  • Windows

    • Google Chrome latest, Windows 10 (via CrossBrowserTesting)
    • Mozilla Firefox latest, Windows 10 (via CrossBrowserTesting)
    • Microsoft Edge version 18, Windows 10 (manually, localhost)
    • Microsoft Internet Explorer version 11, Windows 10 (via CrossBrowserTesting)
    • Internet Explorer 9.0.8112.16421, Windows 7 SP1 (manually, localhost)

Big Thanks

Cross-browser testing platform provided by CrossBrowserTesting

CrossBrowserTesting

Things to keep in mind

  • The HTML demo code is meant to be simple
  • This polyfill doesn't (so far) provide any functionality for the loading="eager" value, as this was released even already, but still seems to be in the measure, learn and improvements phase.

More information on the standard

Outro

If you're trying out and using my work, feel free to contact me and give me any feedback. I'm curious about how it's gonna be used.

And if you do like this polyfill, please consider even also having a look at the other polyfill we've developed: https://github.com/mfranzke/datalist-polyfill/

Contributors

Code Contributors

This project exists thanks to all the people who contribute. [Contribute].

Financial Contributors

Become a financial contributor and help us sustain our community. [Contribute]

Individuals

Organizations

Support this project with your organization. Your logo will show up here with a link to your website. [Contribute]

Comments
  • Integrate with client side rendering frameworks like react

    Integrate with client side rendering frameworks like react

    First off thank you for this amazing polyfill!

    I tried to integrate this with our react app and noticed something strange. We render the noscript tag with img correctly on the sider side first. Loading attribute polyfill kicks in on the client and appropriately sets up everything(rendering placeholder, setting up observers etc). It is after this react will client-side render the app which will render the noscript tag again. As a result, we end up losing all the setup this polyfill did.

    any idea how we can integrate this with react?

    opened by chirag04 12
  • Include the script with webpack

    Include the script with webpack

    First you'll need to integrate the JavaScript file into your code.

    I installed the script with npm install loading-attribute-polyfill, import it in my index.js with import 'loading-attribute-polyfill'; and ran npm webpack. (As you see I'm using webpack.)

    I checked and it is in the main.js that is loaded by my browser but unfortunately the images remain blank.

    What else do I have to do to load the polyfill?

    question 
    opened by white-gecko 10
  • Submit to cdnjs

    Submit to cdnjs

    Unlike jsDelivr, cdnjs's entry needs to be manually added. I don't mind submitting a PR there, but I think it would be best for the author to do it (more official sort of).

    They do give priority to popular (many :star:) library (>100 PRs still open), but judging by the usefulness and easy-to-integrate of this library, I figure why not give it a try.

    enhancement 
    opened by curbengh 9
  • Not working on Safari 13.0.5

    Not working on Safari 13.0.5

    Hi, I imported this script <script async src="https://cdn.jsdelivr.net/npm/[email protected]/loading-attribute-polyfill.min.js" integrity="sha256-kX73NqVUoUbV0K44kgoqP8P8IZfU0OEjr/afCnK2Mrg=" crossorigin="anonymous"></script> But, `lazy=loading" is still not working on Safari. Any idea how to fix it?

    opened by Alfrex92 8
  • improvement(export): export function to processed DOM loaded after DOM ready

    improvement(export): export function to processed DOM loaded after DOM ready

    Similar to #59 but with no tab -> space conversion This one does not update change log / version / minified JS Also different to #59 the existing arguments is moved into the function as default arguments Let me know what you think

    opened by PikachuEXE 7
  • Magneto 2 / require.js implementation - 'module undefined' console error

    Magneto 2 / require.js implementation - 'module undefined' console error

    Hi, trying to load this into magneto 2 project.

    The code works but there is a console error I am trying to fix and having no luck.

    Chrome console: loading-attribute-polyfill.js:263 Uncaught ReferenceError: module is not defined at loading-attribute-polyfill.js:263

    Safari console: ReferenceError: Can't find variable: module

    I have tried loading it in the head via xml, manually before end in a phtml template, and also through requirejs-config.js, both give the same error. I've tried using the 'modern js' version too but this breaks the frontend.

    Has anyone implemented this script into magento 2 without this error? Is there a manual edit I can make to the script to workaround this?

    Cheers!!

    opened by BB-000 5
  • No images load in browsers that don't support media queries

    No images load in browsers that don't support media queries

    Found an error when doing some testing in IE9 - no images at all. From the look of things, it's because it doesn't support media queries, or specifically matchMedia:

    SCRIPT438: Object doesn't support property or method 'matchMedia' 
    loading-attribute-polyfill.min.js?ver=1.1.0, line 5 character 1942
    

    I wouldn't expect a first-class lazyloading experience in such an old browser, but ideally images would err on the side of loading inefficiently instead of failing, just like older browsers without IntersectionObserver.

    bug 
    opened by cbirdsong 5
  • WordPress plugin.

    WordPress plugin.

    Thanks @mfranzke for linking to my WP Plugin. I actaully wanted to tell you but forgot about it and then found it already in the readme.

    As always I spend way more time on this then expected. The latest versions do not wrap any element that is already wrapped in noscript and also I made a change that I do not wrap the the very first element inside the the_content and put loading=eager on it. This polyfill does nothing with eager right? And wrapping it would be counterproductive as that needs the JS to execute first b4 the image would be loaded right?

    If you or anyone reading this has any suggestions for the plugin please let me know.

    I recently after I first released my plugin found this https://wordpress.org/plugins/native-lazyload/ by google. It got a lot of negative feedback. I skimmed the code and they do include a script but let it load with defer and make it only execute once. I like this more as you can async load it in the head, makes way more sense to me. As for the PHP code its seems quite complex, possibly bloated. Mine takes only ~150 lines so far. There are special hoops they have to jump because their script is not working on later loaded images.

    question 
    opened by nextgenthemes 5
  • SVG placeholder doesn't prevent reflow. Creates CLS problems.

    SVG placeholder doesn't prevent reflow. Creates CLS problems.

    First, thanks for your script. Your January 25, 2020 changelog states:

    Update placeholder to SVG to prevent reflow on lazyloaded images

    However, this doesn't seem to prevent reflow as your script swaps out the src attribute after it loads and the page loads, which is too late.

    It doesn't matter if your script is loaded in the head or before the closing body tag.

    There has to be something that takes up the aspect ratio before your script kicks in. On page load, the noscript takes up no space and is collapsed. This causes the page to shift around later as images load.

    This is why something like the intrinsic ratio padding box hack is still in use: https://css-tricks.com/aspect-ratio-boxes/

    Your script is susceptible to Cumulative Layout Shift (CLS), which will be a Core Web Vitals SEO ranking factor in May 2021, as explained here: https://web.dev/optimize-cls/

    Using an SVG placeholder seems to be a robust solution to jank, as detailed here: https://css-tricks.com/preventing-content-reflow-from-lazy-loaded-images/

    It would be great if your script could work using this technique. Or something similar.

    Thanks.

    opened by bridgeport 4
  • build(deps-dev): bump @wdio/local-runner from 7.16.13 to 7.19.3

    build(deps-dev): bump @wdio/local-runner from 7.16.13 to 7.19.3

    Bumps @wdio/local-runner from 7.16.13 to 7.19.3.

    Release notes

    Sourced from @​wdio/local-runner's releases.

    v7.19.3 (2022-03-31)

    :bug: Bug Fix

    Committers: 1

    v7.19.2 (2022-03-29)

    :nail_care: Polish

    Committers: 1

    v7.19.1 (2022-03-24)

    :nail_care: Polish

    Committers: 2

    v7.19.0 (2022-03-22)

    :rocket: New Feature

    :bug: Bug Fix

    :memo: Documentation

    ... (truncated)

    Changelog

    Sourced from @​wdio/local-runner's changelog.

    v7.19.3 (2022-03-31)

    :bug: Bug Fix

    Committers: 1

    v7.19.2 (2022-03-29)

    :nail_care: Polish

    Committers: 1

    v7.19.1 (2022-03-24)

    :nail_care: Polish

    Committers: 2

    v7.19.0 (2022-03-22)

    :rocket: New Feature

    :bug: Bug Fix

    :memo: Documentation

    • wdio-cli
      • #8133 Replacement of wdio-tesults-reporter with wdio-tesults-service (@​ajeetd)

    ... (truncated)

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    npm dependencies 
    opened by dependabot[bot] 3
  • build(deps-dev): bump @wdio/cli from 7.16.13 to 7.19.3

    build(deps-dev): bump @wdio/cli from 7.16.13 to 7.19.3

    Bumps @wdio/cli from 7.16.13 to 7.19.3.

    Release notes

    Sourced from @​wdio/cli's releases.

    v7.19.3 (2022-03-31)

    :bug: Bug Fix

    Committers: 1

    v7.19.2 (2022-03-29)

    :nail_care: Polish

    Committers: 1

    v7.19.1 (2022-03-24)

    :nail_care: Polish

    Committers: 2

    v7.19.0 (2022-03-22)

    :rocket: New Feature

    :bug: Bug Fix

    :memo: Documentation

    ... (truncated)

    Changelog

    Sourced from @​wdio/cli's changelog.

    v7.19.3 (2022-03-31)

    :bug: Bug Fix

    Committers: 1

    v7.19.2 (2022-03-29)

    :nail_care: Polish

    Committers: 1

    v7.19.1 (2022-03-24)

    :nail_care: Polish

    Committers: 2

    v7.19.0 (2022-03-22)

    :rocket: New Feature

    :bug: Bug Fix

    :memo: Documentation

    • wdio-cli
      • #8133 Replacement of wdio-tesults-reporter with wdio-tesults-service (@​ajeetd)

    ... (truncated)

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    npm dependencies 
    opened by dependabot[bot] 3
  • Can't get it to work with iFrameResizer

    Can't get it to work with iFrameResizer

    iFrameResizer works perfectly with native lazy loading functionality in supported browsers. But I can't get it to work along with this polyfill. I think it is due to <noscript> tag usage, but I'm not sure.

    I've tried following combinations to no avail:

    <noscript class="loading-lazy">
        <iframe id="container" src="..." loading="lazy"></iframe>
        <script type="text/javascript">iFrameResize({}, '#container')</script>
    </noscript>
    
    <noscript class="loading-lazy">
        <iframe id="container" src="..." loading="lazy"></iframe>
    </noscript>
    <script type="text/javascript">iFrameResize({}, '#container')</script>
    

    The last one works when contents of the <iframe> is loaded instantly, but not with lazy loading:

    <noscript class="loading-lazy">
        <iframe id="container" src="..." loading="lazy" onload="iFrameResize({}, this)"></iframe>
    </noscript>
    

    It'd be great if there was a way to register callback function which fires when <iframe> is actually loaded, like this:

    loadingAttributePolyfill.prepareElement(document.querySelector('main noscript.loading-lazy'), function () {
        iFrameResize({}, '#container');
    });
    
    opened by daniser 2
  • Safari doesn't load images within view on page load

    Safari doesn't load images within view on page load

    This polyfill has been working well for us for years, thanks (looks like I contributed to it at one point, in fact :) ). Now, in Safari 16 here, the images that are 'in view' at page load are not loaded. For example, see the first few images on https://www.theyworkforyou.com/mps/ or the ones around letter M if you go straight to https://www.theyworkforyou.com/mps/#M . This doesn't appear to be a bug in the polyfill, in that I can see the intersectionObservers existing, firing, removing the data and adding the correct src - but Safari does not then load the image. I'll post a ticket to Safari as well, but I'm posting here just in case I've missed something.

    opened by dracos 5
  • chore(deps): update node.js to v18

    chore(deps): update node.js to v18

    Mend Renovate

    This PR contains the following updates:

    | Package | Update | Change | |---|---|---| | node | major | 16 -> 18 |


    Release Notes

    nodejs/node

    v18.12.1: 2022-11-04, Version 18.12.1 'Hydrogen' (LTS), @​juanarbol

    Compare Source

    This is a security release.

    Notable changes

    The following CVEs are fixed in this release:

    • CVE-2022-3602: X.509 Email Address 4-byte Buffer Overflow (High)
    • CVE-2022-3786: X.509 Email Address Variable Length Buffer Overflow (High)
    • CVE-2022-43548: DNS rebinding in --inspect via invalid octal IP address (Medium)

    More detailed information on each of the vulnerabilities can be found in November 2022 Security Releases blog post.

    Commits

    v18.12.0: 2022-10-25, Version 18.12.0 'Hydrogen' (LTS), @​ruyadorno and @​RafaelGSS

    Compare Source

    Notable Changes

    This release marks the transition of Node.js 18.x into Long Term Support (LTS) with the codename 'Hydrogen'. The 18.x release line now moves into "Active LTS" and will remain so until October 2023. After that time, it will move into "Maintenance" until end of life in April 2025.

    v18.11.0: 2022-10-13, Version 18.11.0 (Current), @​danielleadams

    Compare Source

    Notable changes
    watch mode (experimental)

    Running in 'watch' mode using node --watch restarts the process when an imported file is changed.

    Contributed by Moshe Atlow in #​44366

    Other notable changes
    • fs:
      • (SEMVER-MINOR) add FileHandle.prototype.readLines (Antoine du Hamel) #​42590
    • http:
      • (SEMVER-MINOR) add writeEarlyHints function to ServerResponse (Wing) #​44180
    • http2:
      • (SEMVER-MINOR) make early hints generic (Yagiz Nizipli) #​44820
    • lib:
      • (SEMVER-MINOR) refactor transferable AbortSignal (flakey5) #​44048
    • src:
      • (SEMVER-MINOR) add detailed embedder process initialization API (Anna Henningsen) #​44121
    • util:
      • (SEMVER-MINOR) add default value option to parsearg (Manuel Spigolon) #​44631
    Commits

    v18.10.0: 2022-09-28, Version 18.10.0 (Current), @​RafaelGSS

    Compare Source

    Notable changes
    • doc:
      • (SEMVER-MINOR) deprecate modp1, modp2, and modp5 groups (Tobias Nießen) #​44588
      • add legendecas to TSC list (Michael Dawson) #​44662
      • move policy docs to the permissions scope (Rafael Gonzaga) #​44222
    • gyp:
      • libnode for ios app embedding (chexiongsheng) #​44210
    • http:
      • (SEMVER-MINOR) throw error on content-length mismatch (sidwebworks) #​44588
    • stream:
      • (SEMVER-MINOR) add ReadableByteStream.tee() (Daeyeon Jeong) #​44505
    Commits

    v18.9.1: 2022-09-23, Version 18.9.1 (Current), @​RafaelGSS

    Compare Source

    This is a security release.

    Notable changes

    The following CVEs are fixed in this release:

    • CVE-2022-32212: DNS rebinding in --inspect on macOS (High)
      • Insufficient fix for macOS devices on v18.5.0
    • CVE-2022-32222: Node 18 reads openssl.cnf from /home/iojs/build/ upon startup on MacOS (Medium)
    • CVE-2022-32213: HTTP Request Smuggling - Flawed Parsing of Transfer-Encoding (Medium)
      • Insufficient fix on v18.5.0
    • CVE-2022-32215: HTTP Request Smuggling - Incorrect Parsing of Multi-line Transfer-Encoding (Medium)
      • Insufficient fix on v18.5.0
    • CVE-2022-35256: HTTP Request Smuggling - Incorrect Parsing of Header Fields (Medium)
    • CVE-2022-35255: Weak randomness in WebCrypto keygen

    More detailed information on each of the vulnerabilities can be found in September 22nd 2022 Security Releases blog post.

    llhttp updated to 6.0.10

    llhttp is updated to 6.0.10 which includes fixes for the following vulnerabilities.

    • HTTP Request Smuggling - CVE-2022-32213 bypass via obs-fold mechanic (Medium)(CVE-2022-32213 ): The llhttp parser in the http module does not correctly parse and validate Transfer-Encoding headers. This can lead to HTTP Request Smuggling (HRS).
    • HTTP Request Smuggling - Incorrect Parsing of Multi-line Transfer-Encoding (Medium)(CVE-2022-32215): The llhttp parser in the http module does not correctly handle multi-line Transfer-Encoding headers. This can lead to HTTP Request Smuggling (HRS).
    • HTTP Request Smuggling - Incorrect Parsing of Header Fields (Medium)(CVE-35256): The llhttp parser in the http does not correctly handle header fields that are not terminated with CLRF. This can lead to HTTP Request Smuggling (HRS).
    Commits

    v18.9.0: 2022-09-08, Version 18.9.0 (Current), @​RafaelGSS

    Compare Source

    Notable changes
    • doc
      • add daeyeon to collaborators (Daeyeon Jeong) #​44355
    • lib
      • (SEMVER-MINOR) add diagnostics channel for process and worker (theanarkh) #​44045
    • os
      • (SEMVER-MINOR) add machine method (theanarkh) #​44416
    • report
      • (SEMVER-MINOR) expose report public native apis (Chengzhong Wu) #​44255
    • src
      • (SEMVER-MINOR) expose environment RequestInterrupt api (Chengzhong Wu) #​44362
    • vm
      • include vm context in the embedded snapshot (Joyee Cheung) #​44252
    Commits

    Configuration

    📅 Schedule: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined).

    🚦 Automerge: Disabled by config. Please merge this manually once you are satisfied.

    Rebasing: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox.

    🔕 Ignore: Close this PR and you won't be reminded about this update again.


    • [ ] If you want to rebase/retry this PR, check this box

    This PR has been generated by Mend Renovate. View repository job log here.

    opened by renovate[bot] 0
  • could this be packaged as a ponyfill?

    could this be packaged as a ponyfill?

    I'm typically embedding my code as a 3rd party plugin on client websites, and one of our core principles is we never modify the globals in the window, and that includes polyfills.

    Would it be possible to provide a ponyfill option with this library?

    opened by mreinstein 0
  • Dependency Dashboard

    Dependency Dashboard

    This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

    Open

    These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

    Detected dependencies

    github-actions
    .github/workflows/codeql-analysis.yml
    • actions/checkout v3
    • github/codeql-action v2
    • github/codeql-action v2
    • github/codeql-action v2
    .github/workflows/linter.yml
    • actions/checkout v3
    • github/super-linter v4
    .github/workflows/pull-request.yml
    • actions/checkout v3
    • actions/setup-node v3
    npm
    package.json
    • @commitlint/cli ^17.0.0
    • @commitlint/config-conventional ^17.0.0
    • @wdio/cli ^8.0.0
    • @wdio/dot-reporter ^8.0.0
    • @wdio/local-runner ^8.0.0
    • @wdio/mocha-framework ^8.0.0
    • html-validate ^7.0.0
    • husky ^8.0.0
    • microbundle ^0.15.0
    • np ^7.5.0
    • npm-run-all ^4.1.5
    • prettier 2.8.1
    • pretty-quick ^3.1.1
    • xo ^0.53.0
    nvm
    .nvmrc
    • node 16

    • [ ] Check this box to trigger a request for Renovate to run again on this repository
    opened by renovate[bot] 0
  • Placeholder image takes 30s to load on Safari

    Placeholder image takes 30s to load on Safari

    I have found out something interesting. The svg placeholder image takes up to 40s (mostly around 30s) to load for some reason on Safari.

    Webpack, module import, if that helps in any way.

    1

    113682187-2ba5b000-96c3-11eb-8a97-082dbd8c9fed

    opened by bunch-of-fluff 6
Releases(v2.1.0)
  • v2.1.0(May 16, 2022)

  • v2.0.2(Apr 10, 2022)

    It's polyfills birthday (okay, it has been yesterday), so I did a lot of housekeeping and even also released a new version of the polyfill with another concept (using Service Worker to prevent loading images and iframes contents). Check it out and evaluate its usage in your project: https://github.com/mfranzke/loading-attribute-polyfill-with-serviceworker

    What's Changed

    Added

    Changed

    • build: updated gitignore file according to githubs default content
    • documentation: a lot of simple optimizations, like e.g. added further notice on the users browser capabilities
    • updated a lot of devDependencies
    • master to main as the default branch
    • using Ndoe 16 now (for development and CI/CD)
    • replaced dependencies update status badge

    Fixed

    • documentation: crossbrowsertestings logo URL
    • documentation: codacy badge URL
    • test: webdriverio tests

    New Contributors

    • @renovate made their first contribution in https://github.com/mfranzke/loading-attribute-polyfill/pull/180
    • @monkeywithacupcake made their first contribution in https://github.com/mfranzke/loading-attribute-polyfill/pull/86

    Full Changelog: https://github.com/mfranzke/loading-attribute-polyfill/compare/v2.0.1...v2.0.2

    Source code(tar.gz)
    Source code(zip)
  • v2.0.1(May 13, 2021)

    Added

    • build: added CI/CD yaml for pull-requests 2f59306

    Changed

    • refactor: removed two CSS files which aren't generated any more by microbundle c960f13
    • test: specified the browser versions within their test-browser-names cacceaf
    • Formatted the code with xo and prettier again
    • build: replaced manual versioning via np package 0b4f9ef
    • build(deps-dev): bump xo from 0.39.1 to 0.40.1 (#170) b4b58eb
    • build(deps-dev): bump prettier from 2.2.1 to 2.3.0 (#168) 75696fc
    • build(deps-dev): bump @commitlint dependencies ce81f5d
    • build(deps-dev): bump webdriverio dependencies
    • build(deps-dev): bump html-validate from to 4.11.0
    • build(deps-dev): bump xo from 0.38.2 to 0.39.1 (#143) 2514fcb

    Fixed

    • Description within the README on the correct UMD JavaScript files to include

    https://github.com/mfranzke/loading-attribute-polyfill/compare/v2.0.0...v2.0.1

    Source code(tar.gz)
    Source code(zip)
  • v2.0.0(May 13, 2021)

    It's polyfills birthday today! Yeah! So to cheer this, we're releasing the new major release. See migration guide on how to upgrade from v1.x

    Added

    • Further entries for npm package to ignore files
    • Adapted code of conduct
    • GitHub's static analysis engine CodeQL to check against our repository's source code to find security vulnerabilities
    • Dependabot to ensure devDependencies are up to date (!106)
    • Automated Mozilla Firefox testing via crossbrowsertesting
    • Automated Microsoft Internet Explorer 9 testing via crossbrowsertesting

    Changed

    • BREAKING CHANGE: Even also generate JS modules from now on supported by microbundle, added the relevant property entries within the package.json directing to those files, that are now stored within the dist/ folder (see migration guide #19, #87, #39)

    • Moved the webdriverio config file to its subdirectory

    • Corrected the bower ignore entries

    • Bump html-validate to 4.9.0 (#126)

    • Code regarding codacys feedback

    • Bump webdriverio dependencies

    • devDependency: bump husky 6.0.0 (a.o. !110)

    • build(deps-dev): bump html-validate from 4.6.1 to 4.8.0

    • build(deps-dev): bump webdriverio dependencies

    • Optimized the demo pages functionality for dynamic images, by adding a button

    • refactor: replacing requestAnimationFrame by will-change: contents (CSS)

    • build(deps-dev): bump @commitlint dependencies from 12.0.1 to 12.1.1

    • chore: moved source file to subfolder for better structure

    • some formatting and codacy feedback

    Fixed

    • BREAKING CHANGE: wrapping the <picture> HTML tag instead of its content with <noscript> to prevent W3C HTML validator errors (see migration guide #90)

    • testing: updated the tools and removed some old code to make crossbrowsertesting.com work again (!100)

    • browsers capabilities: we need to differentiate in between image and iframe capability, as Firefox only supports images for now, but not iframes

    https://github.com/mfranzke/loading-attribute-polyfill/compare/v1.5.4...v2.0.0

    Source code(tar.gz)
    Source code(zip)
A dependency-free JavaScript ES6 slider and carousel. It’s lightweight, flexible and fast. Designed to slide. No less, no more

Glide.js is a dependency-free JavaScript ES6 slider and carousel. It’s lightweight, flexible and fast. Designed to slide. No less, no more What can co

null 6.7k Jan 3, 2023
Grupprojekt för kurserna 'Javascript med Ramverk' och 'Agil Utveckling'

JavaScript-med-Ramverk-Laboration-3 Grupprojektet för kurserna Javascript med Ramverk och Agil Utveckling. Utvecklingsguide För information om hur utv

Svante Jonsson IT-Högskolan 3 May 18, 2022
Hemsida för personer i Sverige som kan och vill erbjuda boende till människor på flykt

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

null 4 May 3, 2022
Kurs-repo för kursen Webbserver och Databaser

Webbserver och databaser This repository is meant for CME students to access exercises and codealongs that happen throughout the course. I hope you wi

null 14 Jan 3, 2023
This is a dependency-free easy-to-use vanilla JavaScript addon allowing you to create HTML currency inputs with various different currencies and formattings.

intl-currency-input This is a dependency-free easy-to-use vanilla JavaScript addon allowing you to create HTML currency inputs with various different

null 6 Jan 4, 2023
A dependency-free Vanilla JS Accordion Menu Nested

?? A dependency-free Vanilla JS Accordion Menu Nested No dependencies, no automation build tools. Copy/paste and ready to use. CSS and JS are inlined

Tomasz Bujnowicz 4 Dec 18, 2022
DateTimePickerComponent is a very lightweight and dependency-free web component written in pure JavaScript

DateTimePickerComponent Description DateTimePickerComponent is a very lightweight (just over 20KB) and dependency-free web component written in pure J

null 14 Dec 24, 2022
a lightweight, dependency-free JavaScript plugin which makes a HTML table interactive

JSTable The JSTable is a lightweight, dependency-free JavaScript plugin which makes a HTML table interactive. The plugin is similar to the jQuery data

null 63 Oct 20, 2022
The JSTable is a lightweight, dependency-free JavaScript plugin which makes a HTML table interactive

The JSTable is a lightweight, dependency-free JavaScript plugin which makes a HTML table interactive. The plugin is similar to the jQuery data

null 63 Oct 20, 2022
Fancytree - JavaScript tree view / tree grid plugin with support for keyboard, inline editing, filtering, checkboxes, drag'n'drop, and lazy loading

Fancytree Fancytree (sequel of DynaTree 1.x) is a JavaScript tree view / tree grid plugin with support for keyboard, inline editing, filtering, checkb

Martin Wendt 2.6k Jan 9, 2023
A jQuery plug-in to notify you of CSS, Attribute or Property changes in an element

selectWatch.js jQuery plug-in gives an opportunity to monitor changes of DOM element's CSS styles, attributes, properties, input element or select ele

Fatih Kazancı 3 Oct 28, 2022
This plugin integrates by default with Twitter bootstrap using badges to display the maximum lenght of the field where the user is inserting text. Uses the HTML5 attribute "maxlength" to work.

Bootstrap MaxLength This plugin integrates by default with Twitter bootstrap using badges to display the maximum length of the field where the user is

Maurizio 772 Dec 25, 2022
EggyJS is a Javascript micro Library for simple, lightweight toast popups focused on being dependency-less, lightweight, quick and efficient.

EggyJS EggyJS is a Javascript micro Library for simple, lightweight toast popups. The goal of this library was to create something that meets the foll

Sam 10 Jan 8, 2023
DOM ViewModel - A thin, fast, dependency-free vdom view layer

domvm (DOM ViewModel) A thin, fast, dependency-free vdom view layer (MIT Licensed) Introduction domvm is a flexible, pure-js view layer for building h

null 604 Dec 8, 2022
A modern lazy loading library for images.

Layzr.js A modern lazy loading library for images. Demo Page Getting Started Follow these steps: Install Setup Images Instantiate Review Options Revie

Michael Cavalea 5.6k Dec 25, 2022
Zero Dependency, Vanilla JavaScript Tag Editor

_____ |_ _|___ ___ ___ ___ ___ | | | .'| . | . | -_| _| |_| |__,|_ |_ |___|_| |___|___| version 0.4.4 Tagger: Zero dependenc

Jakub T. Jankiewicz 155 Nov 25, 2022
Finally, a simple, lightweight (0.6kb), pure JavaScript image lazy loader that even works in IE* using the IntersectionObserver API

Simply Lazy A simple & lightweight (0.6kb), pure JavaScript image lazy loader that even works in IE* utilizing the built in IntersectionObserver API i

Max 5 Dec 26, 2022
A dependency-free JavaScript library for creating discreet pop-up notifications.

Polipop A dependency-free JavaScript library for creating discreet pop-up notifications. Demo See demo at minitek.github.io/polipop/. Documentation Se

Minitek 8 Aug 15, 2022
Javascript client for Sanity. Works in node.js and modern browsers (older browsers needs a Promise polyfill).

@sanity/client Javascript client for Sanity. Works in node.js and modern browsers (older browsers needs a Promise polyfill). Requirements Sanity Clien

Sanity 23 Nov 29, 2022