5

I would like to execute a few lines of js every time turbolinks is loaded(i.e, the page is loaded), not the js from cache, but would like to force run it before the event of turbolinks load, every time. Is that possible?

I'm trying to get rid of FOUC here, by hiding the html body and doing this in app.js.coffee

$(document).on 'turbolinks:load', ->
    document.body.style.visibility = 'visible'

But the FOUC starts kicking in after the 3rd or 4th time of reloading the page.

To see this live in action, here is a link to the website.

2 Answers 2

2

Turbolinks only loads when using links on that page, not when refreshing the page or navigating via url. If you want to run js when the page is loaded then use $(document).ready(function() { executable js here });

1
  • Actually we want to run js when clicking on a turbolinks enabled link, please checkout the website given on the link in the question, to see the FOUC in action. Also if you notice in the inspector the entire body is hidden and shown again to hide FOUC. But somehow the timing seems to be a bit off.
    – Pre-alpha
    Jul 24, 2016 at 8:16
1
+50

So, FOUC coupled with turbolinks can be very irritating. What we finally did to fix it was hide the entire body with an inline stye and added a script tag within the body:

<script type="text/javascript">
        document.body.style.visibility = 'visible'
</script>

This ensured that when turbolinks is in action it loads up only the body of the HTML, hence having a script run within the body made sure that the js ran every time there was a turbolinks load.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.