Displaying 1 to 20 from 36 results

jquery_lazyload - Vanilla JavaScript plugin for lazyloading images

  •    Javascript

Lazy Load delays loading of images in long web pages. Images outside of viewport will not be loaded before user scrolls to them. This is opposite of image preloading. This is a modern vanilla JavaScript version of the original Lazy Load plugin. It uses Intersection Observer API to observe when the image enters the browsers viewport. Original code was inspired by YUI ImageLoader utility by Matt Mlinac. New version loans heavily from a blog post by Dean Hume.

lozad

  •    Javascript

It is written with an aim to lazy load images, iframes, ads, videos or any other element using the recently added Intersection Observer API with tremendous performance benefits. Existing lazy loading libraries hook up to the scroll event or use a periodic timer and call getBoundingClientRect() on elements that need to be lazy loaded. This approach, however, is painfully slow as each call to getBoundingClientRect() forces the browser to re-layout the entire page and will introduce considerable jank to your website.




lazysizes - High performance and SEO friendly lazy loader for images (responsive and normal), iframes and more, that detects any visibility changes triggered through user interaction, CSS or JavaScript without configuration

  •    Javascript

lazysizes is a fast (jank-free), SEO-friendly and self-initializing lazyloader for images (including responsive images picture/srcset), iframes, scripts/widgets and much more. It also prioritizes resources by differentiating between crucial in view and near view elements to make perceived performance even faster. It may become also your number one tool to integrate responsive images. It can automatically calculate the sizes attribute for your responsive images, it allows you to share media queries for your media attributes with your CSS, helping to separate layout (CSS) from content/structure (HTML) and it makes integrating responsive images into any environment really simple. It also includes a set of optional plugins to further extend its functionality.

vue-lazyload - A Vue.js plugin for lazyload your Image or Component in your application.

  •    Javascript

You can configure which events you want vue-lazyload by passing in an array of listener names.

blazy - Hey, be lazy! bLazy

  •    Javascript

bLazy is a lightweight script for lazy loading and multi-serving images, iframes, videos and more (less than 1.4KB minified and gzipped). It’s written in pure JavaScript why it doesn’t depend on 3rd-party libraries such as jQuery. It lets you lazy load and multi-serve your images so you can save bandwidth and server requests. The user will have faster load times and save data usage if he/she doesn't browse the whole page. If you don't want to host the script yourself you can link to the latest minified file: //cdn.jsdelivr.net/blazy/latest/blazy.min.js on jsDelivr. Exchange latest with the specific version number if you want to lock it in.


react-simple-img - 🌅 React lazy load images with IntersectionObserver API and Priority Hints

  •    Javascript

Image component working similar with standard img tag and with the following props. This function is only required, when you want to customise intersection observer configuration.

yall.js - A fast, flexible, and small image lazy loader!

  •    Javascript

yall.js is a featured-packed lazy loading script for <img>, <picture>, <video> and <iframe> elements. It works in all modern browsers including IE11. It uses Intersection Observer where available, but falls back to scroll, touchmove, resize, and orientationchange events where necessary. It can also monitor the DOM for changes using Mutation Observer to lazy load image elements that have been appended to the DOM after initial page render, which may be desirable for single page applications. It can also (optionally) optimize use of browser idle time using requestIdleCallback. To optimize decoding of <img> lazy loading for simple src and srcset use cases, yall.js uses Image.decode where available to decode images asynchronously before adding them to the DOM.

react-native-lazyload - lazyload for react native

  •    Javascript

A `lazyload` components suit for React Native. Same as ListView. But it won`t render LazyloadView and LazyloadImage inside it, util they are scrolled into sight.

flickity-bg-lazyload - Flickity lazyload background images

  •    HTML

Lazyload background images of selected cells.Set data-flickity-bg-lazyload attribute of the cell to the background image's url.

lazyload-image - HTMLImageElement extension for lazy loading.

  •    HTML

HTMLImageElement extension for lazy loading. Images will be loaded when they are shown. Install lazyload-image via npm or bower.

guide-to-async-components - 📖 Guide To JavaScript Async Components

  •    

Also known as code splitting, dynamic import (TC39 proposal), "chunks" (which are loaded on demand), "layers", "rollups", or "fragments". Async component (in React) is a technique (typically implemented as a Higher Order Component) for loading components with dynamic import.

react-native-scrollview-lazyload - React Native scrollview/listview component with image lazyload feature

  •    Javascript

ScrollView with image/components lazyload feature. Support all ScrollView feature. Detect ScrollView by 'renderRow' and 'dataSource' props(ListView should be add this props).

react-lazyload-fadein - React component to lazyload children with a nice fadein effect.

  •    Javascript

Lazyload your React component and nicely fade in when it's ready. You have a slow component like a large image or complex widget, but want to keep your webapp fast.

cakephp-lazyload - A lazy loader for CakePHP entities.

  •    PHP

This is an association lazy loader for CakePHP ORM entities. It allows you to lazily load association data by accessessing the property, without using contain() (the eager loader). When accessing an association property (as if the data was eagerly loaded), the associated data is loaded automatically.

responsive-lazyload

  •    Javascript

This package was inspired by https://github.com/ivopetkov/responsively-lazy/. It uses very similar markup, but significantly simplifies the way image replacement is handled under the hood. It also adds an optional fallback for when JavaScript is disabled. Check out the examples for copy-pasteable code and more information about usage.

react-lazy-image - Component to render images and lazyload them if are in the viewport (or near to them)

  •    Javascript

Component to render images and lazyload them if are in the viewport (or near to them). This component extends from React.PureComponent so it needs React.js v15.3.0 or superior.