Stack Overflow
Stack Overflow

Questions tagged [preload]

The term preload relates to techniques for improving performance by loading data/contents into memory/cache before processing or displaying it to users: preloading images in browsers to avoid delay in image rendering, preloading data from databases to RAM to avoid DB queries, and so on.

For preloading of Web resources, https://w3c.github.io/preload/ “defines the preload keyword that may be used with link elements. This keyword provides a declarative fetch primitive that initiates an early fetch and separates fetching from resource execution.”

Examples:

<link rel="preload" href="/styles/other.css" as="style">
<link rel="preload" href="/assets/font.woff2" as="font" type="font/woff2">
<link rel="preload" href="/style/other.css" as="style">
<link rel="preload" href="//example.com/resource" as="fetch" crossorigin>
<link rel="preload" href="https:…/x.woff2" as="font" crossorigin type="font/woff2">
<link rel="preload" href="app.js" as="script" onload="pDone()" onerror="plErr()">
1037 questions
19
votes
3 answers

Can link rel=preload be made to work with fetch?

I have a large JSON blob I would like to have preloaded with my webpage. To do this, I have added to my page. I also have a JS request to fetch the same blob. This does not work, and the console…
Carl
  • 1,039
  • 1
  • 9
  • 13
18
votes
8 answers

electron-builder with browserWindow and preload.js. Unable to load preload script

i`ve a problem with electron-builder and the browserWindows preload option in my main.js: // Create the browser window. mainWindow = new BrowserWindow({ x: mainWindowState.x, y: mainWindowState.y, width: mainWindowState.width, …
Kai Werschmöller
  • 251
  • 1
  • 2
  • 8
17
votes
9 answers

Preload CSS file not supported on Firefox and Safari Mac

I added the attribute rel="preload" to all css links like this : It works fine in Chrome but not in…
Afaf
  • 654
  • 1
  • 5
  • 17
17
votes
1 answer

How to preload Leaflet tiles of known bounds in browser cache for faster display?

I'm developing a web application which displays animated markers on a Leaflet map. The map is programmatically zoomed to the first animation bounds, then the animation is played, then the map is zoomed to the second animation bounds and the second…
Julien V
  • 875
  • 6
  • 12
17
votes
1 answer

Preloading fonts in Chrome with 'preload' link directive

The preload directive is not performing in Chrome as expected. Below is a full HTML page that may be opened in Chrome for results comparison. It should be applying all 5 fonts; instead, it only applies the first preloaded font, makes a faux italic…
Tom
  • 1,836
  • 4
  • 16
  • 30
17
votes
2 answers

HTML5 video autoplay but with a 5 seconds of delay

I have a 20 second long HTML5 video loop as the background on my webpage and it is set to autostart. Is it possible to delay the video autoplay for 5 seconds? I am trying to allow the video to load completely before trying to play to prevent it…
Billy
  • 343
  • 2
  • 4
  • 7
17
votes
2 answers

Force a full preload HTML5 video with Javascript?

I'm about to try to fully preload a video in HTML5. I use the attribute preload=auto but it does not preload the entire video... In Chrome, the video is only preloaded up to 2% and in Safari around 50%... Is it possible to force a full preload video…
Romain André
  • 171
  • 1
  • 1
  • 4
16
votes
3 answers

How can we preload fonts in Angular?

Should we include the fonts in index.html file with rel="preload" like the below code or can we configure this in Angular CLI to preload all the fonts required? Please suggest me a better solution as I can see it takes multi-second page load time…
ABHILASH SB
  • 2,122
  • 2
  • 21
  • 31
16
votes
6 answers

JQuery wait for page to finish loading before starting the slideshow?

I have a site with a rotating header image (you've all seen them). I want to do the following: Load the entire page plus the first header image Start the header image slideshow transitioning every x seconds or when the next image has finished…
DevDevDev
  • 5,107
  • 7
  • 55
  • 87
16
votes
2 answers

How to preload some part of google maps?

I'm building a web app with Google Maps API, I need to zoom into an area smoothly, so I use setTimeout to increase the zoom level every second, but in some place with bad network, the map images are loaded too slow that the page quickly turn to a…
wong2
  • 34,358
  • 48
  • 134
  • 179
15
votes
2 answers

html5 video preload

Is it possible to preload an html video? Note: the tag is created dynamicly later. Currently I can do this with images by creating a hidden div and putting all the images in there. Then when I create the need later the image does not need to be…
Adam
  • 655
  • 1
  • 6
  • 19
15
votes
2 answers

Can I preload multiple video resources to load in the same HTML5

I'm working out details on a web application which involves the sequential loading of a long series of (very short) video clips, one after the other, with occasional input from the user establishing new directions for which video clips to load. I…
S P
  • 231
  • 1
  • 4
  • 8
15
votes
5 answers

preload hidden CSS images

I'm working on a jquery based homepage with 5 or so hidden divs, each containing several background css images. The issue is that the browser doesn't load css images into the DOM until the visibility of the parent layer is shown, causing images to…
Cory
  • 558
  • 2
  • 8
  • 15
14
votes
3 answers

display a gif while asp.net page loads

I have a lenghty ASP.NET page load process. Is there a way to display a loading gif while the ASP.NET page loads? Obviously I can't use an image on the page itself, and when I fiirst load a "dummy page" with the "Loading..." picture, that page is…
Didier Levy
  • 3,393
  • 9
  • 35
  • 57
13
votes
1 answer

How to preload svg sprites?

I have a svg sprites file icons.svg like this: …
Jesús López
  • 8,338
  • 7
  • 40
  • 66
1
2
3
…
69 70