sambernard / react-preload Goto Github PK
View Code? Open in Web Editor NEWComponent to preload images before showing content
License: MIT License
Component to preload images before showing content
License: MIT License
I want to preload multiple images in folder using require.context as follows:
let images = require.context("../assets/images", false, /\.(png|jpe?g|svg)$/).keys(); images = images.map(image => image.replace("./", "../assets/images/"));
It loads all images as expected, but without hashes. Create-react-app insert hashes by default when importing images.
How can I add hashes into my array of images?
It appears switching to a new route while images are still preloading will cause an error. This may occur because there is no componentWillUnmount to clear the event listeners?
warning.js?0260:45 Warning: setState(...): Can only update a mounted or mounting component. This usually means you called setState() on an unmounted component. This is a no-op. Please check the code for the undefined component.warning @ warning.js?0260:45getInternalInstanceReadyForUpdate @ ReactUpdateQueue.js?fd2c:34ReactUpdateQueue.enqueueSetState @ ReactUpdateQueue.js?fd2c:181ReactComponent.setState @ ReactComponent.js?702a:65_handleSuccess @ Preload.js?631e:113
Hey first up, just want to say this a cool repo. Anyway I am having some issues with the setup and just wondering if there is something obvious I am missing but I am getting this exception
Uncaught TypeError: Super expression must either be null or a function, not undefined
My package.json
file looks like this
"dependencies": {
"react": "^0.12.2",
"react-addons": "^0.9.0",
"react-dom": "^0.14.0",
"react-preload": "^0.2.2",
"react-tools": "*",
"requirejs": "*"
},
"devDependencies": {
"babelify": "^6.3.0",
"watchify": "^3.4.0"
}
and I start my react file off like below but I get the exception straight away, I expect there is something in my setup missing but not sure yet. Fyi I am using browserify to build my js, thanks. Will
var React = require('react/addons');
var Preload = require('react-preload').Preload;
im sorry, that was my bad.
It would be nice if we had a prop that delays calls to onSuccess/onError (and delays switching out content) until it is set to true
(or something like that).
I have a use case where i have to do some other preloading tasks in addition to preloading images, where it would be nice if the preloader component would stay mounted even when images have already been loaded, until i tell it that it is ok to switch. Does that make sense? :)
Hi, the component looks nice, unfortunately I cannot use it as is for my use case, which is:
SPA that shows pages of images, preloading the next page until the user forces it to show.
This can be supported by adding two features:
I can work around the "ready prop" by doing something like:
render() {
const {ready, children, ...other} = this.props
return (
{ready ? <Preload {...other}>{children}</Preload> : {children}}
)
}
But seems that encapsulating this may be cleaner.
Since 15.5 React.proptypes doesn't exist anymore.
Its now in its own package: 'prop-types'
import PropTypes from 'prop-types';
changes required in:
https://github.com/sambernard/react-preload/blob/master/modules/Preload.js#L1
Hello
Is it possible to keep loadingIndicator in case on an error?
It would be nice if it also can preload audio files, I have applications with many different sounds.
I am using a preload on a non-existing image.
I get the error in the console:
ImageHelper.js:67 failed to preload images/test.pxz
However, the onError is not called whereas onSuccess is. I have resolveOnError also turned off.
This is happening since 5.1, 5.0 was fine.
Getting:
/node_modules/react-preload/lib/Preload.js:27
children: _react.PropTypes.element.isRequired,
TypeError: Cannot read property 'element' of undefined
With Code:
const loadingIndicator = (<div>Loading...</div>)
const imagesL = [
'img1.png',
'img2.png',
'img3.png'
]
<Preload
loadingIndicator={loadingIndicator}
images={imagesL}
autoResolveDelay={5000}
mountChildren={true}
resolveOnError={true}
>
{<div>Hi</div>}
</Preload>
I was trying to use the ImageHelper and ImageCache to preload some background images I am using in my CSS. However, as of :
5c80e8f
it seems to break (tested in Chrome) from using the cached image in a CSS background image.
I think this crossorigin setting should be made optional.
the component has provided a brautifully simple means of preloading a series of images on a slide show for an artists site I am developing, thank you.
The issue is that images are preloaded once only even if the component is sent a new lot of images.
For example, given a single gallery component that presents different sets of images (paintings and sculptures in this instance) when the user first clicks on paintings it pre-loads the paintings and all is well - when the user then clicks on sculptures (without returning to the home page first) no pre-loading occurs.
I believe this is because the preload component does its preloading on componentWillMount - in the containing component that passes the images I also reload data on componentWillReceiveProps to effect the switch between galleries.
Being inexperienced I am hesitent of creating a pull request before asking if this seems like a good approach for this component.
I wanted to use transitions on the loadingIndicator
, but nothing seems to work.
Should this work with ReactCSSTransitionGroup
?
I upgraded React from 15.x to 16.x today. Is it possible to use this package with React 16.x ?
Im using React with Meteor and i get this Error when i try to Import the ImageHelper:
SyntaxError: import declarations may only appear at top level of a module
and a warning that i need React 15.x:
[email protected] requires a peer of react@^15.0.0 but none is installed.
React.PropTypes is deprecated: https://facebook.github.io/react/docs/typechecking-with-proptypes.html
The prop-types package should be used instead.
It would help if you can make loadingIndicator prop optional, I have preloader that's hardcoded into index.html file so it starts showing even before application js files are loaded. Then I hide that preloader with callback from application. So it doesn't need another loading indicator.
This is the error that I get when I try to use preload in my project.
(function (exports, require, module, __filename, __dirname) { import _Preload from './Preload';
The concept of main cache is great, but, there is no documentation about it.
Would be great to have a section of the read me that talk about it
Feature to know % of files loaded
I am always getting images failed to preload. What am I doing wrong?
let images=[
"/assets/images/1.png",
"/assets/images/2.png",
"/assets/images/3.png",
"/assets/images/4.png"
]
let loadSpan= <span className="loadspan">
<i className="spin fa fa-refresh"/>
</span>
<Preload
loadingIndicator={loadSpan}
images={images}
autoResolveDelay={10000}
resolveOnError={true}
mountChildren={true}
>
...other select component
</Preload>
When looking at network activity they are loaded sucessfully, but library still spams console..
I'm using the Preload package in my app , I use webpack to bundle and minify everything using the HtmlWebpackPlugin with minifyjs set to true. When I build the project with this package installed I get the following error:
Failed to minify the code from this file:
./node_modules/react-preload/lib/ImageHelper.js:3
Any hints as to how I could solve this?
It appears that it isn't transpiled to ES5. According to the following link:
I'll try create a transpiled version.
Please see #34 for a fix
Hi, I was trying to use this in a project, but I use es6 so the var Preload = require("react-preload");
becomes import Preload from "react-preload"
but Preload is undefined and I can not render the component, any ideas ?
What are you doing to avoid image flashes after element mounts?
That's how I using it. After image loads, I change state to mount child component which contains same image. But image doesn't appears instantly, it looks like it's loading again, it renders progressively. (tested in chome and ff) Do you have any ideas why it may happens?
this.state = {
imagesLoaded: false
}
...
_handleImageLoadSuccess = () => {
this.setState({
imagesLoaded: true
})
}
...
<Preload
loadingIndicator={<div/>}
images={[imageUrl]}
onSuccess={this._handleImageLoadSuccess}
mountChildren={imagesLoaded} >
<div className='my-image' style={{backgroundImage: `url(${imageUrl})`}}></div>
</Preload>
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.