We’re using Turbolinks to speed up page loads, but this is an issue we’ve found that goes all the way down to the DOMContentLoaded event. In all our projects we always had an assumption that images would not block the page:load or DOMContentLoaded event. We mainly use these events to know when the DOM is ready for selecting elements.
But then with a single page with numerous inline background-image styles in the DOM we found that the event first triggered after 10+ seconds, resulting in an awful UX experience!
Our solution was simple. Instead of listening to the load event we just send a custom event when we know all HTML is ready by adding this just before the </body> tag:
<script type="text/javascript">
var event = document.createEvent("Event")
event.initEvent("app:ready", true, true)
document.dispatchEvent(event)
</script>Then we just change our javascript so we’ll listen to the app:ready event. Now the javascript will run as soon as the DOM tree has loaded!
Dan Schultzer is an active experienced entrepreneur, starting the Being Proactive groups, Dream Conception organization, among other things. You can find him at 