Re: [polymer-dev] Element works fine locally, but demo on GH Pages fails

[Eric Bidelman]

Karan, did you get this squared away? It seems like the demo is working again.

On Mon, May 19, 2014 at 7:25 AM, Karan Goel <karan...@gmail.com> wrote:

So for x-meme (https://github.com/karan/x-meme), running it locally works fine but on GH pages, the images are all messed up: http://karan.github.io/x-meme/components/x-meme/demo.html

What's happening is I'm getting the width of image after it's loaded to set width of everything else, but (look in the console when opening demo page) it actually gets a width of 0px. I think it's because it get's the width before image has loaded, but I'm not sure why, I am doing everything after onload event.

Follow Polymer on Google+: plus.google.com/107187849809354688692
---
You received this message because you are subscribed to the Google Groups "Polymer" group.
To unsubscribe from this group and stop receiving emails from it, send an email to polymer-dev...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/7f75ef36-a831-4f2b-b212-351141205ad5%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Karan Goel]

Yes I did Eric. I used polymer event handler and that seemed to work.

- Karan Goel
Sent from Nexus 4. Please ignore typos and abbreviations.

[Scott Miles]

Because the image isn't part of the main document, it's not guaranteed to be available at body.onload time.

Listening for the image's own onload event is the right solution. 

To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/CAFhNAVGLnUcW7zexpHb9NC-bPgQp2zcjgPtceEbCCoMUA_pP1A%40mail.gmail.com.

[Karan Goel]

So earlier I was listening for `onload` event in the image, but then I did not have access to everything else because of scoping. So I put the width setting code in domReady which was working fine locally but not on GH pages. I don't know why.

Karan Goel

Goel.im | Github

[Scott Miles]

`domReady` has no guarantee that async resources like images are loaded, you have to listen to the image itself, as you did.

You can attach to the image's load event several ways, using Polymer's 'on-load' is not special other than being super convenient.

Scott

[Karan Goel]

That makes sense. Is there a good reference to what guarantees events like created, ready, domReady etc make? The polymer API page wasn't very descriptive.

Karan Goel

Goel.im | Github

[Eric Bidelman]

Those gems are in the API docs:

http://www.polymer-project.org/docs/polymer/polymer.html#lifecyclemethods

Also some relevant sections from the FAQ:

http://www.polymer-project.org/resources/faq.html#zerochildren

[Karan Goel]

Yeah I didn't find the API to be specific enough for me. But the FAQ is golden. Thanks.

Karan Goel

Goel.im | Github