This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.no-webp .home-banner-background { | |
background-image: url('img/banner.jpg'); | |
} | |
.webp .home-banner-background { | |
background-image: url('img/banner.webp'); | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
export const canUseWebp = headers => { | |
//headers will be passed as an input | |
const { accept: header = '' } = headers || {}; | |
// accept is denoted as header | |
let useWebp = false; | |
if (header && header.indexOf('image/webp') !== -1) { | |
// Server side rendering | |
useWebp = true; | |
} | |
return useWebp; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// check_webp_feature: | |
// 'feature' can be one of 'lossy', 'lossless', 'alpha' or 'animation'. | |
// 'callback(feature, result)' will be passed back the detection result (in an asynchronous way!) | |
function check_webp_feature(feature, callback) { | |
var kTestImages = { | |
lossy: "UklGRiIAAABXRUJQVlA4IBYAAAAwAQCdASoBAAEADsD+JaQAA3AAAAAA", | |
lossless: "UklGRhoAAABXRUJQVlA4TA0AAAAvAAAAEAcQERGIiP4HAA==", | |
alpha: "UklGRkoAAABXRUJQVlA4WAoAAAAQAAAAAAAAAAAAQUxQSAwAAAARBxAR/Q9ERP8DAABWUDggGAAAABQBAJ0BKgEAAQAAAP4AAA3AAP7mtQAAAA==", | |
animation: "UklGRlIAAABXRUJQVlA4WAoAAAASAAAAAAAAAAAAQU5JTQYAAAD/////AABBTk1GJgAAAAAAAAAAAAAAAAAAAGQAAABWUDhMDQAAAC8AAAAQBxAREYiI/gcA" | |
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
export const canUseWebp = headers => { | |
let useWebp = false; | |
if (typeof document === 'object') { | |
// Client side rendering | |
const canvas = document.createElement('canvas'); | |
if ( | |
canvas.getContext && | |
canvas.getContext('2d') && | |
canvas.toDataURL('image/webp').indexOf('data:image/webp') === 0 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import React from "react"; | |
const Loading = props => { | |
if (props.error) { | |
return <div>Error!</div>; | |
} else { | |
return <div>Loading...</div>; | |
} | |
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
function LoadableVisibilityComponent(props) { | |
const visibilityElementRef = useRef(); | |
const [isVisible, setVisible] = useState(preloaded); | |
function visibilityHandler() { | |
if (visibilityElementRef.current) { | |
intersectionObserver.unobserve(visibilityElementRef.current); | |
trackedElements.delete(visibilityElementRef.current); | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
let intersectionObserver; | |
const trackedElements = new Map(); | |
if (IntersectionObserver) { | |
intersectionObserver = new window.IntersectionObserver( | |
(entries, observer) => { | |
entries.forEach(entry => { | |
const visibilityHandler = trackedElements.get(entry.target); | |
if ( |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import React, { Component } from 'react' | |
import Loadable from 'react-loadable' | |
import createLoadableVisibilityComponent from './createLoadableVisibilityComponent' | |
import { IntersectionObserver } from './capacities' | |
function LoadableVisibility (opts) { | |
if (IntersectionObserver) { | |
return createLoadableVisibilityComponent([opts], { | |
Loadable, | |
preloadFunc: 'preload', |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
render() { | |
if (this.state.loading || this.state.error) { | |
return React.createElement(opts.loading, { | |
isLoading: this.state.loading, | |
pastDelay: this.state.pastDelay, | |
timedOut: this.state.timedOut, | |
error: this.state.error, | |
retry: this.retry | |
}); | |
} else if (this.state.loaded) { |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import Loadable from 'react-loadable'; | |
import Loading from './Loading'; | |
export default Loadable({ | |
loader: () => | |
import(/* webpackChunkName: "ComponentName" */ 'components/componentName'), | |
modules: ['components/componentName'], | |
loading: () => Loading, | |
}); |