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
0
votes
2 answers

preload images / text so when .load is triggered there isnt a delay

im using jquery .load to load in some content and images into a slide out div, but there seems is a delay in loading the images in, so i end up getting placeholder boxs for the images while the panel is sliding out. Is there a way that i can delay…
sam
  • 9,486
  • 36
  • 109
  • 160
0
votes
1 answer

How to preload img with busy img before it is displayed on jquery tooltip

I'm using this scrpt to load bigger image from thumbnail on a product listing page: $(function() { $('a.listingProductImageTooltip').tooltip({ track: true, delay: 0, showURL: false, bodyHandler: function() { return "
benzo
  • 55
  • 2
  • 12
0
votes
2 answers

Preloading images linked to from page

I would like to improve the loading speed of the Shadowbox popup images on this page Basically, all images opened by Shadowbox are linked to from this page:
Caroline Elisa
  • 1,246
  • 6
  • 18
  • 35
0
votes
2 answers

jQuery preload only works with ie on refresh

I`m having a problem with ie9 not always loading preloaded images. Sometimes I haft to refresh the page and then it works. $jQuery.fn.img_preloader = function(options){ var defaults = { repeatedCheck: 550, fadeInSpeed: 1100, …
-1
votes
1 answer

Preloading audio files in HTML5 project

For my HTML5 project i want to preload audio files. I want them to be preloaded and cached. so that I can play them when i want. I preloaded content and images using jquery (http://www.gayadesign.com/scripts/queryLoader/), but i could not preload…
Bruno
  • 37
  • 8
-1
votes
1 answer

Laravel Admin lte preloader

I have a laravel project using admin lte theme. This Amin lte has a preloader with some animations. I am currently facing one problem, this preloader only preloads after the html shows. Normally with pure html and css, I use a script tp make the…
Filipe Cruz
  • 81
  • 1
  • 10
-1
votes
1 answer

How to load config file from http request on initialization of library in Angular

i am trying to solve race condition in our application. We have base urls stored in extarnal config file and every request needs to access this file. Currently we are calling request for this file in constructor. // getting url from file // getEnv…
-1
votes
2 answers

Is it safe in HTML to use link stylesheet preload?

I want to ask for opinions about this syntax, one So far I tested in IE tab that even in IE11 it seems to load page just fine. So this syntax…
Peminator
  • 783
  • 1
  • 9
  • 24
-1
votes
2 answers

How to know when image preloading is done with javascript?

Per this extremely popular question, preloading images with javascript is as easy as: function preloadImage(url) { var img=new Image(); img.src=url; } But what I'd like to know is how can you know when that's done? I could just do a small…
temporary_user_name
  • 35,956
  • 47
  • 141
  • 220
-1
votes
2 answers

Disable scrolling on preloader

is there a way to disable the user to scroll if the preloader is active? So to disable the body from scrolling. It would be amazing if you could help me. Here is my code atm:
#preloader{ background: #000…
Louis
  • 19
  • 5
-1
votes
1 answer

Preload/Lazyload Images using Javascipt as user scrolls down a page

Edit: Solved it and what I wanted had nothing to do with lazyloading. I'm leaving the original question and post as it is but removed the excerpt (since the excerpt is pretty much pointless and I'm deleting it on codesandbox.io). The answer which I…
StarPass
  • 51
  • 1
  • 5
-1
votes
1 answer

How to preload a html page or a video before it loads

I just wanna know, how to preload a html file or a video in html before that page is opened. Because I wanna a guy. Like if he opens the site and click a button, immediately a new page would come and play the video... Also I wanna disable the video…
Suki
  • 11
  • 2
-1
votes
1 answer

GatsbyJS: Preload critical masthead image

I am having an issue on my site where my above-the-fold masthead image comes in way too late which makes the site feel slow. The site is built with GatsbyJS where I am using the Gatsby Image plugin as well. I have tried with rel="preload as="image"…
TurboTobias
  • 595
  • 3
  • 19
-1
votes
1 answer

Preloading fonts in CSS File

i have a font-awesome CSS-Fille which i load in the footer of my website. In the CSS File the fonts are loaded kike this: font-display:swap;src:url(../webfonts/fa-brands-400.eot);src:url(../webfonts/fa-brands-400.eot?#iefix)…
tom84
  • 371
  • 1
  • 3
  • 15
-1
votes
1 answer

Add 'preload' with the fonts in Wordpress

With the node modules i have this file added to my theme. But it is showing in the "Google Pagespeed Insight". Consider using to prioritize fetching resources that are currently requested later in page load. In my CSS file it is…
Ranjit
  • 1,684
  • 9
  • 29
  • 61