Comments (9)
I also tried with full path and looked into network activity , they are fetch sucessfully from server with 200 OK , but I am still getting spammed in console with "Images failed to preload"
from react-preload.
👍
from react-preload.
@obykoo can you put together a codepen for me to look at?
from react-preload.
Hello, I put together this codepen:
https://codepen.io/anon/pen/dvvwML?editors=1111
There is no warning in console with codepen.
However when I try same code on my localhost , there is warning...
import React from 'react';
import Preload from 'react-preload';
import Select from 'react-select';
export default class App extends React.Component {
render() {
let images=["http://res.cloudinary.com/dt4katy80/image/upload/v1489174402/5_kr6t52.png",
"http://res.cloudinary.com/dt4katy80/image/upload/v1489174402/4_wg4sg4.png",
"http://res.cloudinary.com/dt4katy80/image/upload/v1489174402/3_rl1hdy.png"];
let optionsRender=[];
optionsRender.push({value:"1",label: <span className="option"><img src="http://res.cloudinary.com/dt4katy80/image/upload/v1489174402/5_kr6t52.png"></img>{"1"}</span> });
optionsRender.push({value:"2",label: <span className="option"><img src="http://res.cloudinary.com/dt4katy80/image/upload/v1489174402/4_wg4sg4.png"></img>{"2"}</span> });
optionsRender.push({value:"3",label: <span className="option"><img src="http://res.cloudinary.com/dt4katy80/image/upload/v1489174402/3_rl1hdy.png"></img>{"3"}</span> });
let loadSpan= <span className="loadspan">
<i className="spin fa fa-refresh"/>
</span>;
return (<div> <Preload
loadingIndicator={loadSpan}
images={images}
autoResolveDelay={15000}
resolveOnError={true}
mountChildren={true}
>
<Select
options={optionsRender}
autosize={true}
className={"Select"}
clearable={false}
searchable={false}
autoload={true}
/>
</Preload>
</div>);
}
}
ReactDOM.render(
<App />
,
document.getElementById('app')
);
Is there any way I can at least turn off console.warn?
from react-preload.
No- there's not an option to remove the warning. When accessing it locally are you using a domain (eg http://localhost), or just viewing a file directly in your browser?
from react-preload.
When using localy while developing I am acessing them by domain name. Anyway this is not problem because code I posted above giving me same warning and images there are hosted externally as you can see.
from react-preload.
I'm actually not seeing the warning when I look. What browser are you using?
from react-preload.
I've been receiving the same warning, even though the Network inspector shows all images to load correctly (status 200).
The warning gets thrown in the _handleSuccess
method (modules/Preload.js#L82). I guess the assumption was made that this.autoResolveTimeout
would only be set if the timeout had completed, which of course is not the case. This means that the warning will always get thrown if you have the autoResolveDelay
prop set.
This can be easily fixed by moving the warning and call to _handleSuccess
into a separate callback (modules/Preload.js#L67). Like this:
this.autoResolveTimeout = setTimeout(() => {
console.warn('images failed to preload, auto resolving');
this._handleSuccess();
}, this.props.autoResolveDelay);
from react-preload.
This has been resolved: 99c953b#diff-44a458d379c4c083b784f6b5b953a210L89
from react-preload.
Related Issues (20)
- Warning on route change HOT 1
- Compatibility with ReactCSSTransitionGroup HOT 2
- images not preloading on receiving new props HOT 5
- ImageHelper.js?5691:18Uncaught TypeError: Promise is not a constructor
- Image flashes after component mounts HOT 2
- crossorigin breaks cache when using it without it HOT 1
- Feature to know % of files loaded HOT 1
- Use the prop-types package instead of React.PropTypes HOT 2
- Preload images with hashes
- Using a fake image throws an error in the console but onError is not called HOT 1
- Using proptypes from its own library HOT 1
- [deleted]
- TypeError: Cannot read property 'element' of undefined HOT 7
- Keep loadingIndicator on error?
- Failed to minify ImageHelper.js HOT 4
- Cannot import preload HOT 2
- Cannot load react-preload in older browsers such as Internet Explorer 11
- Package failed after upgrading React to 16.x HOT 1
- Make loadingIndicator prop optional HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-preload.