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

  •        68

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.

https://github.com/sergiodxa/react-lazy-image#readme
https://github.com/sergiodxa/react-lazy-image

Tags
Implementation
License
Platform

   




Related Projects

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-image-picker - :sunrise_over_mountains: A React Native module that allows you to use native UI to select media from the device library or directly from the camera

  •    Java

This library started as a basic bridge of the native iOS image picker, and I want to keep it that way. As such, functionality beyond what the native UIImagePickerController supports will not be supported here. Multiple image selection, more control over the crop tool, and landscape support are things missing from the native iOS functionality - not issues with my library. If you need these things, react-native-image-crop-picker might be a better choice for you. To use this library you need to ensure you match up with the correct version of React Native you are using.


ng-lazyload-image - Lazy image loader for Angular ≥ v2

  •    TypeScript

The browser you targeting need to have support of WeakMap and String.prototype.includes. If you need to support an older browser (like IE) you will need to include polyfill for WeakMap and String.prototype.includes (see https://github.com/zloirock/core-js for example).

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.

react-native-image-picker - A React Native module that allows you to use native UI to select media from the device library or directly from the camera

  •    Java

This library started as a basic bridge of the native iOS image picker, and I want to keep it that way. As such, functionality beyond what the native UIImagePickerController supports will not be supported here. Multiple image selection, more control over the crop tool, and landscape support are things missing from the native iOS functionality - not issues with my library. If you need these things, react-native-image-crop-picker might be a better choice for you. IMPORTANT NOTE: You'll still need to perform step 4 for iOS and steps 2 and 5 for Android of the manual instructions below.

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.

react-native-image-gallery - Pure JavaScript image gallery component for iOS and Android with high-performance and native feeling in mind

  •    Javascript

A pure JavaScript image gallery component for React Native apps with common gestures like pan, pinch and doubleTap, supporting both iOS and Android. This component utilizes @ldn0x7dc/react-native-view-pager as the scrollable container and react-native-transformable-image as the wrapped image.

react-image-crop - A responsive image cropping tool for React

  •    Javascript

A responsive image cropping tool for React. Include either dist/ReactCrop.css or ReactCrop.scss.

react-medium-image-zoom - Medium.com style image zoom for React

  •    Javascript

This library is a different implementation of Medium.com's image zoom that allows for a low-res and high-res images to work together for “zooming” effects and works regardless of parent elements that have overflow: hidden or parents with transform properties. Versions >=3.0.0 are compatible with React.js >=16.x; if you need compatibility with react@^0.14.0 || ^15.0.0, please use version 2.x. You can view the demo here.

react-native-img-cache - Image Cache for React Native

  •    TypeScript

CachedImage component and Cache image manager for React Native. I am no longer maintaining this library but react-native-expo-image-cache which depends on ExpoKit.

react-native-fit-image - Responsive image component to fit perfectly itself.

  •    TypeScript

React Native Fit Image enables you to draw responsive image component. Responsive image component to fit perfectly itself.

react-native-image-progress - Progress indicator for networked images in React Native

  •    Javascript

Note: Progress indicators has been broken out to a separate component; react-native-progress. To use them, please follow installation instructions for that package. Note: onLoad* events are bubbled up, so if you want to do some custom thing when the image is loaded for example.

react-native-sketch-canvas - A React Native component for drawing by touching on both iOS and Android

  •    Javascript

A React Native component for drawing by touching on both iOS and Android. To use an image as background, localSourceImage(see below) reqires an object, which consists of filename, directory(optional) and mode(optional). Note: Because native module cannot read the file in JS bundle, file path cannot be relative to JS side. For example, '../assets/image/image.png' will fail to load image.

react-native-image-resizer - 🗻 Resize local images with React Native

  •    Objective-C

A React Native module that can create scaled versions of local images (also supports the assets library on iOS). Note: on latest versions of React Native, you may have an error during the Gradle build on Android (com.android.dex.DexException: Multiple dex files define Landroid/support/v7/appcompat/R$anim). Run cd android && ./gradlew clean to fix this.

react-avatar-editor - Avatar & profile picture component editor

  •    Javascript

Facebook like, avatar / profile picture component. Resize, crop and rotate your uploaded image using a clear user interface. The resulting image will have the same resolution as the original image, regardless of the editor's size. If you want the image sized in the dimensions of the canvas you can use getImageScaledToCanvas.





We have large collection of open source products. Follow the tags from Tag Cloud >>


Open source products are scattered around the web. Please provide information about the open source projects you own / you use. Add Projects.