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, 2020 in Java-Script by kartik
• 37,520 points
2,695 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, 2020 by Niroj
• 82,840 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, 2020 in Java-Script by Niroj
• 82,840 points
12,462 views
0 votes
1 answer

How to test if a string is JSON or not?

Hello @kartik, Use JSON.parse function isJson(str) { ...READ MORE

answered Oct 8, 2020 in Java-Script by anonymous
• 82,840 points
4,170 views
0 votes
1 answer

What are XMLHttpRequest Object in Ajax?

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

answered Jan 31, 2020 in Java-Script by Niroj
• 82,840 points
1,428 views
+1 vote
1 answer

How to make anchor tag with routing using Laravel?

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

answered Mar 18, 2020 in Laravel by Niroj
• 82,840 points
23,090 views
0 votes
1 answer

What is redirection in Laravel?

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

answered Mar 18, 2020 in Laravel by Niroj
• 82,840 points
3,018 views
0 votes
1 answer

How to install Laravel via composer?

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

answered Mar 23, 2020 in Laravel by Niroj
• 82,840 points
2,951 views
+1 vote
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, 2020 in Laravel by Niroj
• 82,840 points
44,894 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, 2020 in Java-Script by Niroj
• 82,840 points
2,884 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, 2020 in Java-Script by Niroj
• 82,840 points
5,066 views
webinar REGISTER FOR FREE WEBINAR X
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP