Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

react-delayload

Package Overview
Dependencies
Maintainers
1
Versions
9
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-delayload

A library offering delay-loading of images for React, same as Lazyload for jQuery. Moreover, offering a compatible function using plain javascript for manipulating HTML content directly.

  • 0.2.1
  • latest
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
1
decreased by-90%
Maintainers
1
Weekly downloads
 
Created
Source

React-DelayLoad

Like Lazyload plugin for jQuery, Delayload is library offering a React component for delay-loading images, and it uses throttle to lower the render cost when scrolling and resizing. Moreover, for raw HTML contents created by HTML editors, the library also offers a function for DOM manipulation using plain javascript, and there is no need to require jQuery.

Installation

yarn add react-picker

or

npm install react-picker --save

Example

####React Component

	import DelayLoad from 'react-delayload'
	render() {
		return (
            <div>
                {
                    this.props.images.map(function(image, idx) {
                        return (
                            <DelayLoad key={idx}>
                                <img src={image}/>
                            </DelayLoad>
                        )
                    })
                }
            </div>
        )
	}

Attributes

  • enableDelay: Whether to enable delay-loading. Default as true
  • height: Height of placeholder block. Default as 0
  • threshold: Setting threshold causes image to load N pixels before it appears on viewport. Default as 0

Full example ./example/test.jsx

####DOM

	import {delayload} from 'react-delayload'
	componentDidMount() {
        let images = React.findDOMNode(this.refs.raw).querySelectorAll("img")
        // images is not a real array, and using forEach will not work
        for (let i = 0; i < images.length; ++i) {
            delayload(images[i])
        }
    }

Options

  • data_attribute: Name of the data attribute for storing original SRC value. Default as 'original'
  • height: Height of placeholder block. Default as 0
  • threshold: Setting threshold causes image to load N pixels before it appears on viewport. Default as 0

Full example ./example/test-dom.jsx

##Demo Run the server

	node ./example/server.js

DEMO Links

##License

MIT (http://www.opensource.org/licenses/mit-license.php)

Keywords

FAQs

Package last updated on 09 May 2021

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc