Comments (16)
Are you using server-side rendering? If so, this could be that the image is loaded during server-side rendering, before js is downloaded(react
attach onLoad
handler after js is loaded).
Basically, onLoad
is attached after the image is loaded, that's why it's never fired.
You can check if image is already loaded in componentDidMount
:
componentDidMount() {
// get image ref
const image = this.imageRef.current;
if (image && image.complete) {
console.log('image already loaded');
}
}
from react-imageloader.
Hmm, very strange indeed! I've read through mozilla/webmaker-android#2207 and taken a cursory look at the project (very cool!), but I don't see anything obvious. Is the image local to the app?
from react-imageloader.
The images failing to load are in an S3 bucket, and sitting behind a Cloudfront distribution.
from react-imageloader.
Thanks. Do you know of any other cases where it is also not working, i.e. from the S3 bucket directly?
from react-imageloader.
Not currently. I can try loading images right off of S3, and elsewhere too.
from react-imageloader.
@cadecairos Another question: are you pre-rendering your component server side? I think there might be a case where the img is getting to the DOM before mount in that scenario...
from react-imageloader.
Nope, we're rendering the component client-side
from react-imageloader.
@cadecairos Apologies for the continual bombardment, and thanks for bearing with me. I'm trying to get a reproducible case together using the web instance of webmaker, but no luck so far. So, if you don't mind, i have two questions:
- is it reproducible, to your knowledge, directly in the browser (i'm looking in FF dev edition and chrome)?
- if so, do you have a method I could use to reliably reproduce it?
from react-imageloader.
I've never been able to produce it in a browser, only in the crosswalk webview inside of android.
I wonder if there's a way to get crosswalk running outside of android?
from react-imageloader.
Thank you for looking into this! Ask any and all questions that might help us find out what's going on
from react-imageloader.
No problem! We've been planning a bit of a rewrite for the component for a while now, and this seems like as good a reason as any to bite that bullet, so if you're willing to allow a few more days of bad behavior, i'll have some answer for you (or at least a new version for you to try).
from react-imageloader.
@cadecairos I just pushed a 2.0.0 version to NPM–no significant API changes, but lots of internal changes. Would you mind giving it a spin and see if it solves this problem for you?
from react-imageloader.
wonderful! I'll try it out tomorrow
from react-imageloader.
Darn, still seeing the problem when using v2.0.0
from react-imageloader.
ah crap 😞
What do you think is the likelihood that the problem is being caused by this (apparently very recently fixed) chromium/blink bug? https://code.google.com/p/chromium/issues/detail?id=7731
from react-imageloader.
That does look suspect. I'll try running our app using Crosswalk canary
from react-imageloader.
Related Issues (20)
- Preloader vs Children HOT 1
- Set className of <img>? HOT 8
- behavior when src is null HOT 2
- Idea: timeout
- Proposal: Add an option to change the default img tag HOT 6
- A question: how to use to wait until image is available HOT 1
- Support picture elements or let user provide a component
- Not support any events HOT 2
- Opening a link when click on image.
- will u support Android? HOT 1
- Resize image
- `alt` for image HOT 1
- Question: support for `background-image`?
- How do we use the standalone version ?
- Empty string as src will being pending indefinitely HOT 1
- plugin appears to disable browser caching HOT 1
- [feature request] render <noscript> wrapped <img> tag HOT 1
- Accessing PropTypes via the main React package is deprecated. Use the prop-types package from npm instead. HOT 1
- Will this project be updated? HOT 2
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-imageloader.