CODEWITHSUNDEEP
javascriptjsoncachingpreload
Tom
Tom

Reputation: 30698

Preload large JSON file

I have a two-page signup funnel where the second page needs a fairly large JSON file (400Kb) for an autocomplete field. Loading the file directly for the page results in a small but potentially disruptive delay in user experience, and I'm therefore thinking of pre-loading the JSON on the first page, and having it cached & ready for the second page.

What is a preferred/elegant way of pre-loading the JSON file just for caching purposes? According to can-i-use link rel=preload doesn't have good browser support yet.

Upvotes: 0

Views: 793

Answers (1)

Asons
Asons

Reputation: 87292

The simplest solution I can come up with is to load it with first page, and if done after the DOM been loaded, that page will not appear disruptive.

With this it will be cached and should load with no delay when 2nd page gets called

<head>
    <script>
        (function(d) {
            d.addEventListener('DOMContentLoaded', function() {
                var s = d.createElement('script');
                s.setAttribute('type', 'text/javascript');
                s.setAttribute('src', json.js);
                s.setAttribute('defer', true);
                d.head.appendChild(s);
            })
        })(document);
    </script>
</head>

Upvotes: 1

Related Questions