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

Rails joins or preload belongs_to association from polymorphic model

my problem is following. How can I joins belongs_to association from polymorphic model There is situation opinion.rb class Opinion < ActiveRecord::Base belongs_to :opinionable, :polymorphic => true belongs_to :category end answer.rb class…
Schovi
  • 1,960
  • 5
  • 19
  • 33
13
votes
3 answers

React preloading components with Lazy + Suspense

I'm currently using React 16 with Suspense and Lazy to code-split my codebase. Although I would like to preload components. In my example below I got two routes. Is there a way to preload Demo as soon Prime did mount? I've tried to create another…
ronnyrr
  • 1,481
  • 3
  • 26
  • 45
13
votes
3 answers

HTML5 Video - File Loading Complete Event?

I need to detect when a video file has completed loading. I'm thinking I should use progress->buffer, but in the back of my mind, I remember reading that this was unreliable. Is there a better way, or is this safe? Note, I will be keeping a…
Matrym
  • 16,643
  • 33
  • 95
  • 140
13
votes
5 answers

jQuery: How do you preload sound?

I have a website that plays sound when you click a button. This is how I do it function PlaySound(soundfile) { $('#soundContainer').html(""); } How do you…
Aximili
  • 28,626
  • 56
  • 157
  • 216
12
votes
2 answers

Rails - Turbo - link preload but not used within a few seconds from the window's load event

This is a common question on the web but I didn't found any solution for my problem... I have the same warning message in console on all my rails apps when I click on a link to an other page Just need to find THE solution now... The resource…
Loris_R
  • 123
  • 1
  • 6
12
votes
4 answers

How to preload web worker asset

We are currently implementing web-workers in our company's website (based on ReactJS-Redux) to execute an initial synchronization of the user's data (such as: a list of favorites, a list of discarded...) by calling an API endpoint. The…
pmarfany
  • 121
  • 5
12
votes
1 answer

The link preload is not avoiding the font loading duplication

I read the link preload documentation. In the head section of the html, I have Later on, I load a font.css file wherein it is loaded exactly the same font file (check the…
João Pimentel Ferreira
  • 14,289
  • 10
  • 80
  • 109
11
votes
1 answer

iOS: AVPlayer video preloading

I am using AVPlayer to play videos. The lenght of them is short, 2-5 second. They are played in a random order. The problem is, when changing video, and a new video starts to play, the device lags for a very short time, but i wan't the change to be…
McDermott
  • 1,025
  • 2
  • 16
  • 28
11
votes
1 answer

Why do we need the "crossorigin" attribute when preloading font files?

To correctly preload font files, we're told we always need the crossorigin attribute applied to our tags, e.g: Can anybody give me the…
jahilldev
  • 3,520
  • 4
  • 35
  • 52
11
votes
4 answers

How to preload material icons using rel=preload?

I am trying to optimize my webpage with google lighthouse. The report says to use rel=preloads on links that import Material Design Icons. I have tried to preload them using syntax. I have also…
GreedyAi
  • 2,709
  • 4
  • 29
  • 55
11
votes
2 answers

How to preload iframes

I am having multiple iframes to display data in a page. I want to preload the next 3 iframes while viewing current view. am doing like the below: I will hide the all iframes and set the source for it. When I clicked on a particular view I will show…
NBI
  • 277
  • 1
  • 5
  • 15
11
votes
3 answers

Know when images are done loading in AJAX response

I have a jQuery ajax function that loads some content into a div, some of the content is images. I would like to said until those images which where just loaded in my ajax, are finished loading, and THEN run a function, such as showing the content.…
Nic Hubbard
  • 41,587
  • 63
  • 251
  • 412
11
votes
7 answers

Pre-loading external files (CSS, JavaScript) for other pages

I'm curious if there is an efficient way to wait for the front page of a site to load, and then pre-load CSS and script files that I know will likely be needed for the other pages on the site. I want the front page of the site to be as fast as…
Jason Young
  • 3,683
  • 4
  • 32
  • 39
10
votes
2 answers

How to preload an SVG image properly?

I'm trying to preload an SVG logo on my blog, but Chrome keeps giving me a bunch of warnings and I don't seem to be able to fix them. Logo: https://keestalkstech.com/wp-content/uploads/2019/05/ktt-logo.svg Preload link:
Kees C. Bakker
  • 32,294
  • 27
  • 115
  • 203
10
votes
6 answers

Wait for images to load and then execute all other code

OK, I'm losing my mind over this. I did read here at SO and google about it, I even have the preloader set (found here on SO), but none of the plugins/code I found helped me. What I want to do is: wait until all images are preloaded and only then…
Nikola
  • 14,888
  • 21
  • 101
  • 165
1 2
3
…
69 70