Why are preload link not working for JSON requests ?

0 votes

The JavaScript on my website loads several JSON to initialize itself.

I would like to preload them so, when the JavaScript will launch an Ajax request on it, they will be loaded instantaneously.

A new link tag exists for that.

I tried to use it to load a JSON like that :

<link rel="preload" href="/test.json">

However, Chrome seems to load it twice and present a warning in the console :

The resources test.json was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it wasn't preloaded for nothing.

So it seems that preload doesn’t work for JSON. Indeed, I haven’t found reference to JSON in the specification.

Is that correct or am I doing it wrong ?

Jun 19 in Java-Script by kartik
• 20,980 points
105 views

1 answer to this question.

0 votes

Hii @kartik,

You have to add as="fetch" for JSON files. So your code becomes

<link rel="preload" href="/test.json" as="fetch">

It's supported by all modern browsers and you get a warning message if this resource is not used within a few seconds because it is counterproductive to "preload" it in a such case (delay, double load etc.)

It's different from <link rel="prefetch" ...> which is to anticipate future navigation and not supported widely.

Hope this is helpful!!

Thank You!!

answered Jun 19 by Niroj
• 44,800 points

Related Questions In Java-Script

0 votes
1 answer

How to get rid of underline for Link component of React Router?

Hello, If you are using styled-components, you could do ...READ MORE

answered May 18 in Java-Script by Niroj
• 44,800 points
483 views
0 votes
1 answer

What are XMLHttpRequest Object in Ajax?

 As, you are up to ajax so ...READ MORE

answered Jan 31 in Java-Script by Niroj
• 44,800 points
50 views
0 votes
1 answer

How can we parse JSON using Node.js?

Hello @kartik, You can simply use JSON.parse. The definition of ...READ MORE

answered Apr 24 in Java-Script by Niroj
• 44,800 points
62 views
0 votes
1 answer

How to print a circular structure in a JSON-like format?

Hello, You can use util.inspect(object) in node.js. It automatically ...READ MORE

answered Apr 24 in Java-Script by Niroj
• 44,800 points
94 views
0 votes
1 answer

How to make anchor tag with routing using Laravel?

Hey @kartik, First you have to go to ...READ MORE

answered Mar 18 in Laravel by Niroj
• 44,800 points
1,391 views
0 votes
1 answer

What is redirection in Laravel?

Named route is used to give specific ...READ MORE

answered Mar 18 in Laravel by Niroj
• 44,800 points
125 views
0 votes
1 answer

How to install Laravel via composer?

Hello, This is simple you just need to ...READ MORE

answered Mar 23 in Laravel by Niroj
• 44,800 points
131 views
0 votes
1 answer

What are named routes in Laravel and How can specify route names for controller actions?

Hey @kartik, Named routing is another amazing feature of ...READ MORE

answered Mar 23 in Laravel by Niroj
• 44,800 points
1,355 views
0 votes
1 answer

Error:“Cross origin requests are only supported for HTTP”when loading a local file

Hii @kartik, You are loading the model using ...READ MORE

answered Jun 8 in Java-Script by Niroj
• 44,800 points
121 views
0 votes
1 answer

Jest SecurityError: localStorage is not available for opaque origins

Hello kartik, You must specify what environment (--env) ...READ MORE

answered Apr 24 in Java-Script by Niroj
• 44,800 points
122 views