React图片懒加载

React图片懒加载话不多说了,创建一个LazyLoad.js的React组件,然后将下面的代码复制过去:importReactfrom’react’//import’./lazyload.css’//thresholdconstthreshold=[0.01]classLazyLoadextendsReact.Component{construc…

大家好,又见面了,我是你们的朋友全栈君。

React图片懒加载
  • 话不多说了,创建一个LazyLoad.js的React组件,然后将下面的代码复制过去:
import React from 'react'
// import './lazyload.css'
// threshold
const threshold = [0.01]
class LazyLoad extends React.Component{ 
   
    constructor(props){ 
   
        super(props)
        this.state = { 
   
            io: null,
            refs: null,
            images: null,
            loading: true
        }
        this.handleonload = this.handleonload.bind(this)
    }
    UNSAFE_componentWillMount(){ 
   
        var { 
   ImgClassName, src, alt, ImgStyle } = this.props.state
        ImgClassName = ImgClassName ? ImgClassName : 'lazyload-img'
        alt = alt ? alt : 'antd-lazyload'
        var images = []
        var refs = []
        const ref = React.createRef()
        refs.push(ref)
        images.push(
            <img className={ 
   ImgClassName} ref={ 
   ref} data-src={ 
   src} alt={ 
   alt} style={ 
   { 
   ...ImgStyle}} />
        )
        this.setState({ 
   
            refs,
            images
        })
    }
    componentDidMount(){ 
   
        const io = new IntersectionObserver(entries=>{ 
   
            entries.forEach(item=>{ 
   
                if(item.intersectionRatio <= 0) return
                var { 
    src } = this.props.state
                const { 
    target } = item
                var image = new Image()
                image.src = src
                image.onload = ()=>{ 
   
                    this.setState({ 
    loading: false })
                    target.src = target.dataset.src
                }
            })
        },{ 
   
            threshold
        })
        this.setState({ 
    io })
    }
    handleonload(){ 
   
        var { 
    io, refs } = this.state
        refs.forEach(item=>{ 
   
            io.observe(item.current)
        })
    }
    render(){ 
   
        var { 
    BoxClassName, width, height, BoxStyle } = this.props.state
        BoxClassName = BoxClassName ? BoxClassName : 'lazyload-img-box'
        var { 
    images } = this.state
        return (
            <div className={ 
   BoxClassName} style={ 
   { 
   width, height, ...BoxStyle}}>
                { 
   images}
                <img onError={ 
   this.handleonload} src='' alt='antd-lazyload' style={ 
   { 
   display: 'none'}} />
            </div>
        )
    }
}
export default LazyLoad
  • 使用的时候,像这样:
<LazyLoad 
	state={ 
   { 
   
		src: 'http://example.com/1.jpg',
		alt; '1.jpg',
		BoxClassName: 'lazyload-box', // 这是容器的类名
		ImgClassName: 'lazyload-img' // 这是img的类名
	}}
></LazyLoad>
  • 想知道更多使用请点击这里
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/125903.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • 联想服务器ts系列介绍,联想服务器ThinkServerTS230.ppt「建议收藏」

    联想服务器ts系列介绍,联想服务器ThinkServerTS230.ppt「建议收藏」联想服务器ThinkServerTS230联想在2012年底推出的专为中小型网络应用环境设计的单路塔式服务器——ThinkServerTS230。作为联想ThinkServer服务器家族的入门级产品,ThinkServerTS230在具备极高性价比的同时,亦完美传承了可靠品质、创新引领、全程关怀三大Think基因,具备…

  • XPS文件怎么打开?可以转成PDF格式吗?

    XPS文件怎么打开?可以转成PDF格式吗?我们在打印文件时经常会遇到和我们保存的格式不一样的情况,为了无法轻易变更档案中的数据,有些朋友就将其保存为xps格式文件。下面就一起来看一下打开xps格式文件和转成PDF的方法。1、如何打开XPS文件目前很多人的电脑系统已更新的WIN10系统,其实win10是自带打开XPS文件功能软件的,操作也很方便。首先点击电脑左下角的开始菜单,在搜索框中输入XPSViewer,并点击运行软件。接着在主界面中选择要打开的文件,即可进行阅读操作。2、如何将XPS转成PDF我们可以使用一些在线转换工具,这样不

  • 计算机网络基础知识点总结

    计算机网络基础知识点总结1.计算机网络体系结构2.各层的作用和支持的协议3.物理层传输数据的基本单位:比特流0和1数据传输系统:源系统(源点、发送器)–>传输系统–>目的系统(接收器、终点)通道:单向通道(单工通道):只有一个方向通信,没有反方向交互,如广播双向交替通信(半双工通信):通信双方都可发消息,但不能同时发送或接收双向同时通信(全双工通信):通信双方可以同时发送和…

  • python dll注入 网络_dll注入

    python dll注入 网络_dll注入一、什么是dll​动态链接库(DynamicLinkLibrary或者Dynamic-linkLibrary,缩写为DLL)​是微软公司在微软Windows操作系统中,实现共享函数库概念的一种方式。​这些库函数的扩展名是”.dll”、”.ocx”(包含ActiveX控制的库)或者”.drv”(旧式的系统驱动程序)。pip3install二、为何要有dll​…

  • 科里奥利力的方向

    判断参考系转动的角速度方向根据右手定则,从上往下看,四指绕着物体转动方向,拇指指向的方向为角速度的方向。科里奥利力向上:科里奥利力向下:向量外积大小:a×b=|a||b|sin<a,b>=c方向:从向量a绕到向量b形成的轨迹运用右手定则(同上),拇指指向为c的方向。科里奥利力的方向根据F=2mν×ω科里奥利力的方向由物体的速度指向参考系的角速度,假设上图a…

  • webide配置_web vscode

    webide配置_web vscode背景为了解决函数计算本地环境差异和配置繁琐的问题,在此背景下,就有了我们的WebIDE产品,WebIDE能让函数的开发、测试和部署更加流畅,降低了函数计算的学习成本和缩短了函数的开发周期。WebIDE入口地址:https://ide.fc.aliyun.com介绍WebIDE是一个基于H5支持多语言的集成开发环境。相当于VSCo…

    2022年10月18日

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号