Images make up most of the website’s content size and therefore play a huge part in page load times. This is especially problematic with single-page websites like most landing pages are nowadays. A solution to this problem is lazy loading images, i.e., the images below the fold are loaded asynchronously at a later time. There are two main ways to do lazy loading:

Delay loading images until the above the fold content is loaded, and then load all images Delay loading the image until it is in the user’s viewport

Lazy-loading images when they are in the viewport is really easy with Semantic UI: You define the image src as data-src instead and then attach a visibility handler to the images:

$('.demo.items .image img')

.visibility({

type : 'image',

transition : 'fade in',

duration : 1000

})

;

Lazy-loading images using React and its React Semantic UI port is a bit different as we won’t use jQuery , but React components instead. We can create a LazyImage React component that loads the image when it's in the viewport. For that, we use the Visibility component that has a callback when the top edge of the component is in the viewport:

import PropTypes from 'prop-types'

import { Visibility, Image, Loader } from 'semantic-ui-react'



export default class LazyImage extends React.Component {

static propTypes = {

src: PropTypes.string.isRequired,

size: PropTypes.string,

}



static defaultProps = {

size: `medium`,

}



state = {

show: false,

}



showImage = () => {

this.setState({

show: true,

})

}



render() {

const { size } = this.props

if (!this.state.show) {

return (

<Visibility as="span" onTopVisible={this.showImage}>

<Loader active inline="centered" size={size} />

</Visibility>

)

}

return <Image {...this.props} />

}

}

The usage is exactly the same as Semantic UI React’s Image component as we just forward the props to it:

<LazyImage

src="https://source.unsplash.com/random/400x300"

size="mini"

rounded

/>