CODEWITHSUNDEEP
htmlcssgoogle-chromesvgpreload
Kees C. Bakker
Kees C. Bakker

Reputation: 33421

How to preload an SVG image properly?

I'm trying to preload an SVG logo on my blog, but Chrome keeps giving me a bunch of warnings and I don't seem to be able to fix them.

Logo: https://keestalkstech.com/wp-content/uploads/2019/05/ktt-logo.svg
Preload link: <link rel="preload" href="https://keestalkstech.com/wp-content/uploads/2019/05/ktt-logo.svg" as="image" type="image/svg+xml" crossorigin="anonymous" />

I'm getting the following warnings in Chrome:

A preload for 'https://keestalkstech.com/wp-content/uploads/2019/05/ktt-logo.svg' is found, but is not used because the request credentials mode does not match. Consider taking a look at crossorigin attribute.

And:

The resource https://keestalkstech.com/wp-content/uploads/2019/05/ktt-logo.svg 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.

Any pointers?

Upvotes: 14

Views: 14827

Answers (3)

Julio Munoz
Julio Munoz

Reputation: 1

Also add fetchpriority="high"

<link rel="preload" 
fetchpriority="high" 
as="image" 
href="https://keestalkstech.com/wp-content/uploads/2019/05/ktt-logo.svg" 
type="image/svg" />

Upvotes: 0

demotics2002
demotics2002

Reputation: 810

I tried below and works well. Not sure though if it is the best way to do it

fetch('svg-path').then(() => {
  // do load it into your dom using any library you use
  // and it should load without flickering
})

So far works well for me.

Upvotes: 1

Kees C. Bakker
Kees C. Bakker

Reputation: 33421

Looks like removing the crossorigin attributes fixes it:

<link rel="preload" 
      href="https://keestalkstech.com/wp-content/uploads/2019/05/ktt-logo.svg"
      as="image"
      type="image/svg+xml" />

Upvotes: 19

Related Questions