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
8
votes
4 answers

Best Way to Organize JavaScript Files

So I have web app with multiple JS files (jQuery, jQuery, my own JS code and more). Say I have a page named index.html. What would be the best practice to include / preload my js files? I was thinking about creating a separate JS file that will do…
Ron
  • 81
  • 1
  • 2
8
votes
2 answers

Is it possible to preload an entire HTML5 video source before playing?

Solution I created a working example of the accepted answer which uses an XHR and reports loading progress through a bar. It's available here. https://github.com/synthecypher/full-preload Question I've noticed when I create a
jshbrntt
  • 5,134
  • 6
  • 31
  • 60
8
votes
4 answers

pace.js: "start" event not triggered?

I can't seem to find a solution to this problem I posted in the comments of this question … I'm using the pace.js plugin and I would love to load/show parts of my page immediately without having to wait for the preloader to load all content. I…
matt
  • 42,713
  • 103
  • 264
  • 397
8
votes
1 answer

Preload assemblies: referenced, unreferenced, not loaded until they are needed

I would like to create a splash screen that shows loading of individual assembly, before showing the main form. I am doing preload by: Assembly a = System.Reflection.Assembly.GetExecutingAssembly(); foreach (AssemblyName an in…
Dominik
  • 209
  • 2
  • 13
8
votes
3 answers

Images Gallery, Preloading vs AJAX

Hey I'm trying to make an image gallery but I am stuck at whether I should load all the images while the page loads or get ajax to request new images before they are displayed in the gallery? The example below shows that I'm viewing the second…
str11
  • 437
  • 4
  • 13
8
votes
6 answers

Is it possible to preload an HTML page before displaying it?

I'm not referring to preloading images, I want to preload an HTML page using JQuery.
HyderA
  • 20,651
  • 42
  • 112
  • 180
7
votes
3 answers

Forcing the load of images on iOS to preload

I want to preload images sot that when I add their UIImageView to my currentView, the PNG are already in memory, loaded, inflated etc. As you can see from this time profiling, the images are loaded when they are displayed: In the same time, I'm…
Cyril Godefroy
  • 1,400
  • 12
  • 15
7
votes
4 answers

Preloading Images in NextJS

We are using NextJS 9.3.2 Framework with Static Site Generator i.e SSG with the introduction of Google Lighthouse 6 Largest Contentful paint (LCP)is affecting my Site performance score . Most of sites have a Hero Image in above the fold content. SO…
Vat G
  • 71
  • 1
  • 1
  • 4
7
votes
4 answers

Preload typekit font css

Does anyone know how to preload typekit font? Right now my computed font is Ariel and I get the error: The resource https://use.typekit.net/dwg7avv.css was preloaded using link preload but not used within a few seconds from the window's load event.…
ComCool
  • 773
  • 4
  • 15
  • 28
7
votes
3 answers

HTML - Why is my preloaded resource loading again?

This is my example code: