load specific image before anything else

Question

I\'m a creating a loading screen for website I am making. The website loads many images, scripts, etc. The HTML and CSS part is great, but I need a way to guarantee that the

Answer 1

You can reuse resource prealoding browser support.

I'm not sure it works across all browsers but in my case this approach helps me to load images first. Also it allows to define concrete images so UI specific could be skipped

First define in header what resource you want to preload and define resource priority

or

Second line allow to increase loading priority across all object types (scripts / images / styles). First line - only through images.

Then define in body link to image as usual:

Here is my working example https://jsfiddle.net/vadimb/05scfL58/