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.stateImgClassName = 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) returnvar { src } = this.props.stateconst { target } = itemvar image = new Image()image.src = srcimage.onload = ()=>{this.setState({ loading: false })target.src = target.dataset.src}})},{threshold})this.setState({ io })}handleonload(){var { io, refs } = this.staterefs.forEach(item=>{io.observe(item.current)})}render(){var { BoxClassName, width, height, BoxStyle } = this.props.stateBoxClassName = BoxClassName ? BoxClassName : 'lazyload-img-box'var { images } = this.statereturn (<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>

想知道更多使用请点击这里

React图片懒加载相关推荐

html加载富文本_富文本图片懒加载解决方案
图片懒加载,作为性能优化的一部分,想必我们并不陌生. 在React.Vue项目中,我们都可以引入对应的NPM包处理图片懒加载,如 lazyload.react-lazyload.vue-lazyloa ...
图片懒加载以及数据懒加载
当一个单页面应用加载发送的请求很多时,页面可能会出来的很慢影响用户体验,此时我们就可以对项目进行优化,使用数据懒加载以及图片懒加载优化网络性能.懒加载的原理是当组件对象或者Dom对象出现在可视区域的时 ...
前端如何实现图片懒加载(lazyload) 提高用户体验
定义图片懒加载又称图片延时加载.惰性加载,即在用户需要使用图片的时候加载,这样可以减少请求,节省带宽,提高页面加载速度,相对的,也能减少服务器压力. 惰性加载是程序人性化的一种体现,提高用户体验,防 ...
“懒”的妙用——浅析图片懒加载技术
1.定义图片懒加载是一种网页优化技术.图片作为一种网络资源,在被请求时也与普通静态资源一样,将占用网络资源,而一次性将整个页面的所有图片加载完,将大大增加页面的首屏加载时间.为了解决这种问题,通过前 ...
按需加载图片（图片懒加载）
前言按需要加载图片,这是一个非常实用的功能,不仅可以提高网站的性能,还可以为你节省流量.对于用虚拟主机的朋友来说,如果你的网站是一个图片网站或者图片比较多的网站,那么图片懒加载功能真不能少. 原理 ...
python怎么加载图片-python爬虫--图片懒加载
图片懒加载是一种反爬机制,图片懒加载是一种网页优化技术.图片作为一种网络资源,在被请求时也与普通静态资源一样,将占用网络资源,而一次性将整个页面的所有图片加载完,将大大增加页面的首屏加载时间.为了解 ...
template与图片懒加载
曲线救国的三种案例第一种:underscore.js的图片懒加载 1 <script id="t2" type="text/template"> ...
小程序之图片懒加载[完美方案，你不来看看？]
效果图既然来了,把妹子都给你. 定义懒加载,前端人都知道的一种性能优化方式,简单的来说,只有当图片出现在浏览器的可视区域内时,才设置图片正真的路径,让图片显示出来.这就是图片懒加载. 实现原理监 ...
Python：图片懒加载技术
一. 案例分析:抓取站长素材http://sc.chinaz.com/中的图片数据 #!/usr/bin/env python # -*- coding:utf-8 -*- import reques ...

React图片懒加载

React图片懒加载

React图片懒加载相关推荐

最新文章

热门文章