{"repo":"andreruffert/progressive-image-element","free":true,"listed":false,"github":"https://github.com/andreruffert/progressive-image-element","clone":"git clone https://github.com/andreruffert/progressive-image-element.git","description":"⚡️ Progressively enhance image placeholders once they are in the viewport","language":"HTML","stars":270,"topics":["progressive-image","image-loading","web-components","custom-elements"],"license":"MIT","category":"ui-components","readme_excerpt":"<progressive-image> element Progressively enhance image placeholders once they are in the viewport. Faster page load : Images are loaded only as they enter the viewport, using native browser lazy loading with placeholders Visual stability : Prevent layout shifts when loading images Save data option : Load images only on demand No dependencies : Framework agnostic web component Install Usage 1. Include the script & stylesheet within your application or 2. Use the element markup The placeholder image should be a solid color placeholder, LQIP or SQIP that hint at the content of the progressive image before it loads. Attributes - src Specifies the image to display - srcset One or more image candidate strings - sizes Comma-separated list of source size descriptors - savedata Boolean attribute to load the images only after a click/tap on the placeholder image. By default enabled for slow connections ( slow-2g 2g 3g ). Styling states A CSS class loadable is present on when the image is ready to load on user interaction ( click ). Used for slow connections or when the savedata attribute is present. A CSS class [loading] is present on while the image is loading. A CSS class .loaded is present on children of when the image was loaded. License Distributed under the MIT license. See LICENSE for details. © André Ruffert","default_branch":null,"files":null,"tree":[],"storefront":"/r/andreruffert","claimed":false,"request_supported":{"post":"https://gitbuyer.com/r/andreruffert/progressive-image-element/request-supported","requests":0},"note":"indexed from public GitHub; nothing is for sale on this page. Clone it from GitHub. Paid listings live at /search."}