FremyCompany
Callback on polyfill finish
How can I run a callback function as soon as the polyfill finishes its work and the web page is ready?
That's a good question; I don't think there is a way to know this currently.
Technically the polyfills runs at all times and updates as necessary, so I don't really know when you can decide it has finished, though I guess an event firing on an element as soon as it has finished layout would help a lot already.
Btw I think what I just proposed would be to add
d.element.dispatchEvent(new Event("gridLayoutUpdated"));
// actually Event is not constructible in IE11 so we would need to use the older createEvent but I don't know the exact syntax anymore, would have to look it up
at the end of a relayout pass:
https://github.com/FremyCompany/css-grid-polyfill/blob/master/src/css-grid/lib/grid-layout.js#L1419
Could you try this out, and tell me if that works for you? If it does, feel free to create a pull request or if you don't have time just tell it here and I'll try to make the actual change myself then.
Yes, this is the place where I have put my callback invocation too. Generally it works, but many times it is too early - only after the second or third relayout the web page is ready. Is there a way to predict how many relayouts are necessary? Thanks!
Are you using images, web fonts, or loading content dynamically? I guess what you want is for those to be ready and a relayout has happened after that; how to achieve that is a question I can't answer without seeing actual content
This is the website in question: http://www.nexocode.ch. It is a static website with images and a recaptcha. Try opening it in a browser not supporting CSS Grid Layout. I want to show a full page loader in this case. For now, I am hiding it on the first relayout, but many times the page is not ready yet.
Secondly, sometimes the footer is not positioned properly and there is some white space below it. Do you know why is it so?
Thanks!
Because of this issue, I had to use absolute positioning instead of CSS Grid Layout on that page.