score:1
ok this puts a dummy image in the dom (that should not show) and listens to it's onload
event. when that fires, it will then update the src (manually, i.e. not via state) of the 'real' image element.
const img_width = 320;
const img_height = 240;
const baseimageurl = `http://loremflickr.com/${img_width}/${img_height}`;
const pics = [
'https://img1.wsimg.com/fos/sales/cwh/8/images/cats-with-hats-shop-02.jpg',
'https://img1.wsimg.com/fos/sales/cwh/8/images/cats-with-hats-og-image.jpg',
'http://www.dispatch.com/content/graphics/2015/05/08/2-cats-in-hats-crafts-art-gof11etjd-1crafts-cats-in-hats-jpeg-03592-jpg.jpg',
'http://www.dispatch.com/content/graphics/2015/05/08/2-cats-in-hats-crafts-art-gof11etjd-1crafts-cats-in-hats-jpeg-0b417-jpg.jpg',
'https://i.ytimg.com/vi/cnycdffegbc/maxresdefault.jpg'
];
// this should really be hidden
// leaving it visible for, um, visibility
const hiddenimagestyle = {
width: 100,
height: 100,
};
class image extends react.component {
constructor(props) {
super(props);
this.onnextimageload = this.onnextimageload.bind(this);
this.nextimageurl = pics[0];
}
onnextimageload() {
this.visibleimgel.src = this.nextimageurl;
}
render() {
this.nextimageurl = pics[this.props.imageindex % 5];
return (
<div>
<img
ref={el => this.visibleimgel = el}
width={img_width}
height={img_height}
src={pics[0]}
/>
<img
style={hiddenimagestyle}
src={this.nextimageurl}
onload={this.onnextimageload}
/>
</div>
);
}
}
class imagecontroller extends react.component {
constructor(props) {
super(props);
this.gotonextimage = this.gotonextimage.bind(this);
this.state = {
imageindex: 0,
};
}
gotonextimage() {
this.setstate({imageindex: this.state.imageindex + 1});
}
render() {
return (
<div>
<image imageindex={this.state.imageindex} />
<button onclick={this.gotonextimage}>
next image
</button>
</div>
);
}
};
reactdom.render(<imagecontroller/>, document.getelementbyid('app'));
jsbin: https://jsbin.com/ramoxa/2
Source: stackoverflow.com
Related Query
- React: Switch images after load
- React won't load local images
- How to import an entire folder of SVG images (or how to load them dynamically) into a React Web App?
- "Failed to load resource: net::ERR_HTTP2_PROTOCOL_ERROR" for React app after upgrading to Visual Studio 2019 16.10.0
- React router not allowing images to load
- next/image does not load images from external URL after deployment
- Cant load a react app after starting server
- React Native local images load slowly
- React Router doesn't load images properly with nested routes
- Load third party iframe in React after page load, so that the iframe does not affect PageSpeed score
- How to load background images from css in React and NextJS
- React Native + Redux: Why does Switch immediately turns back to false after being switched to true?
- Next.JS - Gist's embedded in markdown rendered via dangerouslySetInnerHTML only show after full page load, not React route load
- Creating an installer for Electron React JS app - reactJS component doesn't load when run after install
- React images load locally but not on AWS Amplify
- dynamically load images with react
- How to load JWT token on to React during initial download after authentication from Multi Page Application?
- React Router doesn't load the new page component after redirecting via navigate
- Using webpack and url-loader to load inline images in React
- React JS FSLightbox Package Images load path Error
- Stop tabs from reloading after initial load in React
- react router v6 won't switch to Home Page after Login Page: Warning: Can't perform a React state update on an unmounted component
- How to switch the state of buttons in react hooks after updating it through rest api?
- React images not loading locally after gh-pages installation
- Proper way to load local stored images from folder in React
- React wont load images that are imported from an array of objects
- Redrawing or Reinitialising Windyapi in React Js but it is not load after I change the Route
- React - Load component after useContext returns value
- ReactJS: Go to anchor link in HTML with react router dom only after the full page load
- It is possible to switch between more already loaded images with React Spring?
More Query from same tag
- Why ReactHighcharts SolidGauge's rounded is not working in react
- `TypeError: store.dispatch(...).then is not a function` when trying to test async actions
- React 18 - Infinite rendering when passing a state variable for lazy loading
- How I can pass argument to callback function of addEventListener
- 'useState' value is empty
- React-redux - state overwrites itself
- Does removing unused imports have an impact on bundle size and build time in Reactjs
- Can't render inside a map function
- React JoditEditor insert image not working
- Gatsby second layout template
- map state in return React
- Gatsby Graphql Skip
- Form is not submitting in react js
- Redux Map Store by props name
- Can't get query parameter after changing from Router to HashRouter on React JS
- React native Typescript path alias unable to resolve module
- React Router different layout each page
- Material UI: How to style filledInput component from an instance of the TextField component?
- React mouse events fired on components not listening for them
- Jest: How to mock a promise on the same file for resolve and reject options?
- search in array in arry of objects by single character
- Reset state to initial state only for specific state variables
- How to access object inside of an object javascript
- Don't get the value after submitting form
- React routing within another component V6
- How is server-side rendering compatible with single-page applications?
- Why does node.js app is now working on iPhone?
- How to detect all Typescript and ESLint errors in NextJS project, not just in opened files?
- I'm trying to upload files with multer in node.js backend and react js in frontend but it doesn't work in back side with multer in public folder
- React - Subsequent variable declarations must have the same type