Search code examples
javascriptruby-on-railsturbolinks

Execute JS every time on the event of turbolinks load in Rails 5 app


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.


Solution

  • 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.