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
10
votes
1 answer

c and LD_PRELOAD. open and open64 calls intercepted, but not stat64

I've done a little shared library that tries to intercept open, open64, stat and stat64 sys calls. When I export LD_PRELOAD and run oracle's sqlplus, I can see the traces of the open and open64 calls, but no traces of the stat and stat64 calls. The…
klayme
  • 145
  • 2
  • 5
10
votes
1 answer

HTTP2 pushed webfonts not used

I'm sending a Link preload header in the HTTP2 response. Like this one: Link: ; rel=preload; as=script, ; rel=preload; as=font scripts, styles and images don't cause any…
snøreven
  • 1,904
  • 2
  • 19
  • 39
10
votes
1 answer

Preloading assets with webpack

I have a preloader that takes an array of image URLs and starts loading the files as soon as my app is opened. Every time I use require() on an image I would like webpack to add that image's URL to the array that my preloader will be using. My first…
Justin
  • 459
  • 1
  • 4
  • 6
10
votes
3 answers

Preload images using css

Is this an acceptable way to preload images, compared to some js code inside of html / head body:after{ display:none; content: url(img1.jpg) url(img2.jpg) ... } js way $.preload = function() { for (var i = 0; i <…
qadenza
  • 9,025
  • 18
  • 73
  • 126
9
votes
4 answers

Block UI spinning preloader

I was wondering if anyone could shed insight as to how I could add a spinning preloader (like apple uses) using the jQuery Block UI plugin. The preloader would have to spin until the AJAX content loads. Is this possible with Block UI? Any…
Chad
  • 103
  • 1
  • 2
  • 4
9
votes
4 answers

How to preload script using integrity and crossorigin

I wish to use preload for my Jquery libs and use the following code.
Del
  • 159
  • 1
  • 10
9
votes
2 answers

Preloading textures in SpriteKit

I've done some research and I can't seem to find anything that clearly explains how to go about preloading both single textures and textures within animations. I'm currently using Atlas's in Assets.xcassets to group related animation images. Does…
muZero
  • 948
  • 9
  • 22
9
votes
2 answers

Phaser loading images dynamically after preload

With Phaser I am working on a game. This game rewards the player with an item that is not capable of being preloaded. After an Ajax call I was hoping to load the image and then display it in the phaser animation. Is there anyway to do this? Flow:…
Case
  • 4,244
  • 5
  • 35
  • 53
9
votes
1 answer

Glide preload doesn't save in cache

I would like to preload images before they are showed to the user. I have a ViewPager where every page is an image. When the activity starts, it calls: Glide.with(this).load(uri).preload(); After that all the images are preloaded (theoretically),…
fran
  • 1,119
  • 1
  • 10
  • 27
9
votes
1 answer

Should I use preload_app with Puma on Heroku?

I am running a small Rails app on Heroku with one dyno and several Puma workers. The Puma docs say: General rule is to use preload_app when your workers die often and need fast starts. If you don’t have many workers, you probably should not…
Max Wallace
  • 3,609
  • 31
  • 42
8
votes
3 answers

Can I add custom headers while trying to preload XHR data?

I am firing an XHR from JS code. This render-blocking XHR is fired on every page load, so I want to fetch it early in page's lifecycle, in parallel with JS and CSS resources. Inside my index.html, I'll add the following code:
Ayush
  • 93
  • 2
  • 14
8
votes
3 answers

Glide: Preload images in memory cache (with or without disk cache)

I am using glide.load(url) .diskCacheStrategy(DiskCacheStrategy.ALL) .preload() to preload images. However, I need them to be in memory and not just on disk, so it's loaded in ImageView more quickly, the way it does when I revisit the…
Rahul Tiwari
  • 6,851
  • 3
  • 49
  • 78
8
votes
1 answer

How defer script is different that preload link?

Preload: fetch a CSS stylesheet and apply it at some later time, fetch a JavaScript asset and execute it later, and so on. Preload fetches do not block the document load event and allow the application to determine which resources are…
George Paouris
  • 525
  • 4
  • 16
8
votes
3 answers

How to preload a font with with Webpack Encore and webfonts-loader?

My project is built on : Symfony / Webpack Encore bundle webfonts-loader Running a Lighthouse audit, the first opportunity to improve performances is : Consider using to prioritize fetching resources that are currently…
Neko
  • 171
  • 1
  • 6
8
votes
3 answers

How to preload image in a React JS component?

I'm currently rendering a child component when a signInError occurs. The signInError is stored in the parent component and if it's not null, it renders the component, as per the code below: ParentComponent.js // Some code... …
cbdeveloper
  • 27,898
  • 37
  • 155
  • 336