Load image before anything else (render-blocking)-CodePudding

I have an image i want to load as the first thing when my page loads. Currently i have an img tag with a src but it loads asynchronously, how can i assure the browser loads my image before rendering the page further?

CodePudding user response：

I have done something similare ...

I have a 'splash screen' (you can use a simple white div to simulate no rendering ...) Make a fetch to the img in js, then remove your splash screen ...

Fetch the img in js load the img in browser cache... so when your DOM display the img, she already in the browser cache ...

CodePudding user response：

A simple solution could be to use the preload attribute on <link>: Link types: preload. It is not a grantee that the content will be ready, as I read it, but maybe it fits your case.

Here is an example:

<head>
  <link rel="preload" href="https://via.placeholder.com/450" as="image"/>
</head>

<body>
  <img src="https://via.placeholder.com/450" />
</body>