react-delayload

0.2.1 • Public • Published

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)

Install

npm i react-delayload

DownloadsWeekly Downloads

0

Version

0.2.1

License

MIT

Unpacked Size

249 kB

Total Files

14

Last publish

Collaborators

  • nickeljew