每次单击链接以加载新页面时，如何停止加载其他资产？

Question

I have a weird problem, when I click on a link in my project, I get an extra package of assets, each click = +1 extra package of assets. 10 clicks = 10 copies of the assets. (10 images, 10 css files 10 js files instead of 1). All my jquery events triggered by 10 times. I do not even know where to look for a solution. I will be grateful for any help.

my app.js

    //= require jquery
    //= require jquery_ujs

    //= require foundation

    //= require turbolinks
    //= require jquery.easing.1.3.js
    //= require_tree .

    $(function(){
        $(document).foundation();
    });


    $(document).ready(function () {
        var $main_container = $("#main_container");
        var $menu_link = $('#menu-link');
        var $s_menu = $("#s-menu");

        $menu_link.click(function () {
            $main_container.animate({"margin-left": "-200px"}, 100);
            $s_menu.animate({"margin-right": "0"}, 100);
        });

        $(".container-fluid").on("click", function(){
            $main_container.animate({"margin-left": "0"}, 100);
            $s_menu.animate({"margin-right": "-200px"}, 100);
        });


        $('input[type="submit"]').focus(function(){
            $(this).blur();
        });

    });

============

After some experimenting (I removed all js from my project) it seems to me that problem lies in rails caching. Because each click is forcing browser to download new package of assets.

============

I found out that my problem is in turbolinks gem, it caches assets each time and then download new package of assets. But how I can fix this?

Answer 1

Where are you loading

<%= javascript_include_tag "application" %>

If you are loading it at the bottom of the page within the body turbolinks refreshes the whole body tag, which could be causing your multiple loading assets when you click a link. Move it to the top within the head.