*nix Programming Mammals

    react-scroll-over-img

    1.0.8 • Public • Published

    react-scroll-over-img

    处理滚动加载的Img组件。

    安装

    npm install react-scroll-over-img

    sass-node安装异常

    当nodejs版本较低时,安装node-sass会出现异常,请使用cnpm执行:

    $ npm rm node-sass
    $ cnpm install node-sass

    详情请查看:https://github.com/sass/node-sass/issues/468

    使用说明

    在文档布局中处理图片的异步加载,提供当图片滚入可视区域时才加载的图片的效果。 <Img>组件使用方法和普通的HTML<img>标签一模一样,支持所有<img>属性。 使用方法:

    import React from 'react'
    import {render} from 'react-dom'
    import Img from 'react-scroll-over-img'
     
    render(<Img src="http[s]://domain[:port]/path"/>
        ,document.getElementById('root'))

    可以运行源码中的example了解如何使用:npm run example <Img>参数说明: 除了<img>源生属性,还提供一下参数接口。

    接口 类型 说明
    onOff boolean 延迟加载的开关。默认为true。设定为fasle后会关闭延迟加载的功能。可以通过环境参数全局设置。
    loadSrc string 当图片进入浏览器可视区域时,会有一个预加载效果。这里可以指定预加载时要显示的图片。建议图片不超过2KB或已经缓存。原始图片加载完成后会被移除。
    loadClassName string 图片异步加载时显示的样式。加载完成后会被移除。默认是毛玻璃效果样式。

    滚动元素设定 默认情况下,Img组件会根据window.document.body元素的滚动事件来判断某个元素是否进入可视窗口。但是并不是所有的页面使用body滚动。组件提供一个bind方法用于绑定滚动元素。如果滚动元素发生变更,可以重复调用bind方法设定。

    import React from 'react'
    import {render} from 'react-dom'
    import Img from 'react-scroll-over-img'
    import bind from 'react-scroll-over-img/bind'
    class App extends React.Component {
        constructor(...props) {
            super(...props)
        }
     
        componentDidMount(){
            bind(this.el)
        }
     
        render(){
            return(
                <div style={{overflowY: 'scroll', height: '100%'}} ref={el=>{this.el = el}}>
                    <Img src="img-URL"/>
                </div>
            )
        }
    }
    render(<App />, document.getElementById('root'))

    如果滚动元素不是通过React装载的,默认HTML文本中已经包含,可以通过全局环境变量来设置

    全局环境设置 可以使用webpack的DefinePlugin插件设定全局参数:

    {
        plugins: [
            new webpack.DefinePlugin({
                __scrollOverImgOptions: '{"onOff": true, "scrollDom": "box-1"}'
            })
        ]
    }

    参数说明:

    参数 类型 说明
    renderMode string 渲染模式。可选值:allnone,默认值为allall表示父组件任何渲染都会导致<Img>组件直接渲染,none表示父组件发生任何渲染都不会引起内部渲染。如果图片只渲染一次到页面上,建议设定为none
    onOff boolean 全局图片延迟加载开关。设置为true时图片滚动进入浏览区域后加载,设置为false时候组件装载到DOM就加载。
    flowDelay number 加载启动延迟。当多个图片需要加载时,我们使用流水线的方式保证图片逐一加载,而不是全部阻塞在一起。这个值用用于设定流水线启动的延迟。默认10MS。
    empty string 默认加载图片,当没有为<Img>组件设定loadSrc时,会使用这个参数指定的图片,默认为一个1像素的空白gif。
    filter string 图片加载时的效果,默认为毛玻璃。当没有为<Img>组件设定loadClassName时生效。
    scrollDom string/object 设定滚动元素。默认情况下,组件会根据window.document.body的滚动事件来判断图片是否移入可视区域。可以通过这个参数指定。当设定为字符串时,组件会通过元素ID查找。
    scrollOffset number 图片滚动加载的偏移量,单位px。负数表示向上偏移,此时向下滚动图片会被更早加载。整数表示向下偏移,会被更晚加载。默认为-25。

    判断元素滚动的高阶组件scroll 除了图片之外,其实所有的元素都可以用于判断是否被滚入可视区域。

    import React from 'react'
    import ReactDOM from 'react-dom'
    import {scroll} from './scroll'
    const MyComponent = scroll(/*options*/)(class extends React.Component {
        constructor(...props) {
            super(...props)
        }
        componentDidMount() {
            //向高阶组件注册真实document元素
            this.props.register(ReactDOM.findDOMNode(this.refs.element))
        }
     
        render(){
            //当元素进入浏览器可视区域时,高阶组件会将props.over属性修改为 true
            const {over} = this.props
            return(<div ref='element'>Element is {over?'over':'leave'} client view</div>)
        }
    })

    options模式情况下可以不必设置。设置后会导致某些默认行为变更。 参数说明:

    参数 类型 说明
    inOff boolean 标记当元素滚动进入屏幕区域后,是否移除监听,默认为true
    registerName string 注册处理器的名称,默认为 'register'。例如将其设定为myRegister,那么在子元素中使用props.myRegister(element)设定要监控滚入的元素。
    removeName string 移除处理器名称,默认为'remove',调用方式props.remove()。
    emitName string 元素所处范围的属性名称,默认为'over'。通过props.over获取,当元素滚入屏幕时,会被设置为ture,未滚入时为false。

    Install

    npm i react-scroll-over-img

    DownloadsWeekly Downloads

    1

    Version

    1.0.8

    License

    MIT

    Unpacked Size

    92.9 kB

    Total Files

    36

    Last publish

    Collaborators

    • chkui