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
141
votes
13 answers

Preloading CSS Images

I have a hidden contact form which is deployed clicking on a button. Its fields are set as CSS background images, and they always appears a bit later than the div that have been toggled. I was using this snippet in the section, but with no…
Peanuts
  • 2,641
  • 6
  • 29
  • 34
78
votes
7 answers

preloading font with rel preload

I am preloading a font using the HTML tag with the rel attribute set to preload as captured in the snippet below; While this works as expected by loading the…
Gareth Jones
  • 871
  • 1
  • 7
  • 12
67
votes
4 answers

What are the differences between html preload and prefetch?

Preload and prefetch are both used to request resources in advance so that later resource loading can be quick. It seems that I can interchange the two without…
golopot
  • 10,726
  • 6
  • 37
  • 51
59
votes
4 answers

rel=preload for stylesheet isn't applying the styles once downloaded

I'm trying out rel=preload for the first time, using it for a couple of stylesheets. Here is the code in question:
Denno
  • 2,020
  • 3
  • 19
  • 27
56
votes
6 answers

How to preload a sound in Javascript?

I can preload images easily thanks to the onload function. But it doesn't work with audio. Browsers like Chrome, Safari, Firefox, etc. don't support the onload functions in the audio tag. How do I preload a sound in Javascript without using JS…
Manuel Ignacio López Quintero
  • 2,598
  • 4
  • 28
  • 30
51
votes
11 answers

Error loading preloads: Could not find renderer

I am running jupyter notebook in vscode. But when I try to run the following cell of code I got error. import os from torch.utils.data import DataLoader from torchvision.datasets import ImageFolder import torchvision.transforms as tt import…
doc
  • 828
  • 2
  • 6
  • 18
32
votes
5 answers

How can I preload a page using HTML5?

I remember reading about a meta tag that makes the browser preload a page. What's the tag again?
Leo Jiang
  • 24,497
  • 49
  • 154
  • 284
28
votes
5 answers

Preloading all assets

Is there a single universal way to load all assets before using them? I am wanting to load some images, audio files, and a few .swf files before my app starts. Currently, I load the images by creating new elements and setting the src to the…
alh
  • 2,569
  • 6
  • 29
  • 42
27
votes
5 answers

How to preload a CSS @font-face font that is bundled by webpack4+babel?

I have a webpack4+babel bundler setup for a react web app. In a LESS file, I reference a local font. This font gets copied over to the dist folder on build and its filename is hashed. I want to be able to preload this font. Here is my LESS…
Frank
  • 451
  • 1
  • 5
  • 11
24
votes
2 answers

must have a valid `as` value

I'm trying to preload a video using the link tag's preload rel value per mdn's documentation on preload. in my index.html file I'm adding the following to the head: In chrome…
Chris Schmitz
  • 20,160
  • 30
  • 81
  • 137
22
votes
6 answers

Preload font-awesome

I am trying to pre-load font-awesome to improve my page load times:
DD.
  • 21,498
  • 52
  • 157
  • 246
22
votes
6 answers

Flexslider slow image load

I am using Flexslider on a website I'm building. I like the responsiveness very much and thats the reason I don't wan't to change to nivo-slider or something similar. The negative about it is that it doesn't display the first image before all…
Alfred Larsson
  • 1,339
  • 1
  • 9
  • 16
21
votes
5 answers

Gapless Transition from Video to Video using html5

I am trying to create a feature where a user can change (back and forth) between multiple videos while maintaining a single consistent audio. Think of being able to watch a concert from multiple angles but listening to a single audio. The trouble I…
bennygubear
  • 211
  • 1
  • 2
  • 5
21
votes
3 answers

How to preload images using Vue.js?

I have a small app using Vue.Js (with webpack). I have a transition section. When the user clicks to a button the content going to change. It's a simple DIV element with an IMG child element. My problem is when the user clicks the button, the next…
user6338195
20
votes
2 answers

Warning: must have a valid `as` value

When trying to rel="preload" a video file using a tag in the I get a warning in the Chrome console stating: must have a valid `as` value My tag is:
Tyler Hall
  • 363
  • 1
  • 2
  • 7
1
2 3
…
69 70