9

I wish to use preload for my Jquery libs and use the following code.

<link rel="preload" href="https://code.jquery.com/jquery-3.4.0.slim.min.js" as="script" integrity="sha256-ZaXnYkHGqIhqTbJ6MB4l9Frs/r7U4jlx7ir8PJYBqbI="
  crossorigin="anonymous">

<script
  src="https://code.jquery.com/jquery-3.4.0.slim.min.js"
  integrity="sha256-ZaXnYkHGqIhqTbJ6MB4l9Frs/r7U4jlx7ir8PJYBqbI="
  crossorigin="anonymous"></script>

However this always generates the following warnings within chrome.

  1. A preload for 'https://code.jquery.com/jquery-3.4.0.slim.min.js' is found, but is not used due to an integrity mismatch.

  2. The resource https://code.jquery.com/jquery-3.4.0.slim.min.js was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate as value and it is preloaded intentionally.

The code below will work fine if I use the standard implementation.

<link rel="preload" href="https://code.jquery.com/jquery-3.4.0.slim.min.js" as="script">

<script>
  src="https://code.jquery.com/jquery-3.4.0.slim.min.js"
</script>

So my question is can I preload external libs and use the crossorigin and integrity (Subresource Integrity) as well?

Thanks

Del
  • 159
  • 1
  • 10

4 Answers4

9

Digging this subject up to add some current behaviour that were not mentioned before.

Currently, as of the end of 2020, to preload a resource that requires integrity and crossorigin attributes, both attributes MUST be specified in both tags, <link> and <script>, and MUST be matching, to be effectively preloaded.

example

<link rel="preload" href="http://..." integrity="sha..." crossorigin="anonymous" as="style" />
<link rel="stylesheet" href="http://..." integrity="sha..." crossorigin="anonymous" type="text/css" media="all" />

If this not followed, a warning will be issued in the console:

The resource http://... was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate "as" value and it is preloaded intentionally.

amarinediary
  • 4,930
  • 4
  • 27
  • 45
8

This is now supported by several browsers. Chromium issue mentioned in other answer is currently closed. Firefox and Safari also seems to support this feature.

Filip Kwiatkowski
  • 615
  • 2
  • 9
  • 20
4

Short answer: You can't.

Resources with an integrity attribute can’t reuse preloaded resources (for now) and can also cause double fetches. The integrity attribute for link elements has not yet been implemented and there’s an open spec issue about it. This means the presence of any integrity metadata will currently discard preloaded resources. In the wild, it can also result in duplicate requests where you have to make a trade-off between security and performance.

Xelance
  • 112
  • 2
  • 1
    The below answer should be the accepted one - it has been added to Chromium and it worked for me on Chrome stable 89 – Harry Theo Apr 12 '21 at 11:28
0

In my case, I was trying to scroll to the page top which has a fixed header. I got the below warning in the console of Chrome.

The resource https://xxxxxx.com/xxx.js
was preloaded using link preload but not used within a few seconds from
the window’s load event. Please make sure it has an appropriate as value
and it is preloaded intentionally.

And I fixed the problem by adding the setTimeout function. (Give a tiny delay so that your scrollTo() action could fire after Chrome's default scroll to html anchor event.)JavaScript issue with scrollTo() in Chrome

So I changed my source from

scrollTop() {
    window.scrollTo(0, 0)
},

to

scrollTop() {
  setTimeout(function () {
    window.scrollTo(0, 0)
  }, 10)
},
kingkoma
  • 1
  • 1
  • 2
    Please provide additional details in your answer. As it's currently written, it's hard to understand your solution. – Community Aug 30 '21 at 15:20
  • While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. – I_love_vegetables Aug 31 '21 at 09:33