Questions tagged [preloading]

Use preloading for questions related to programmatically requesting files or data using a heurestic or presumptive algorithm.

Preloading can be used to optimize the user experience based on events, hints, metadata, or user behavior analysis.

References

273 questions
192
votes
8 answers

How to set the thumbnail image on HTML5 video?

Is there a way to set thumbnail image on HTML5 video? I want to see some pictures before play. My code looks like this:
48
votes
2 answers

How exactly does link rel="preload" work?

Chrome's new version added support for . They have posted a lot of info with references to the original documentation. Can someone provide simple explanation on how it works and what is the difference compared to the case without…
Ilya Chernomordik
  • 27,817
  • 27
  • 121
  • 207
38
votes
2 answers

drawImage() not working

I am reading through "Making Isometric Social Real-Time Games with HTML5, CSS3 and Javascript." I am not far into it, and I have run into a canvas problem that has ahd me stumped for most of the day. drawImage() does not seem to be drawing. I have…
Jeremythuff
  • 1,518
  • 2
  • 13
  • 35
34
votes
3 answers

How do I preload images into dropzone.js

I have a dropzone.js instance on a web page with the following options: autoProcessQueue:false uploadMultiple:true parallelUploads:20 maxFiles:20 It is programmatically instantiated, as it is part of a larger form. I have it rigged up to process…
ralbatross
  • 2,448
  • 4
  • 25
  • 45
18
votes
7 answers

Image preloading in React Native

I am building my first app with React Native, an app with a long list of images. I want to show a spinner instead of image while image is loading. It is sounds trivial but i didn't found a solution. I think for a spinner i suppose to use…
Ivan Chernykh
  • 41,617
  • 13
  • 134
  • 146
17
votes
1 answer

Preloading fonts in Chrome with 'preload' link directive

The preload directive is not performing in Chrome as expected. Below is a full HTML page that may be opened in Chrome for results comparison. It should be applying all 5 fonts; instead, it only applies the first preloaded font, makes a faux italic…
Tom
  • 1,836
  • 4
  • 16
  • 30
16
votes
4 answers

Preload has_many associations with dynamic conditions

I have a Place model and an Event model. Places can have events that take place on a specific date. How can I set up my associations and finders to load all places including (eager loading) their events at a specific date without N+1 query…
nvano
  • 337
  • 6
  • 13
14
votes
2 answers

How can I enable opcache preloading in PHP 7.4?

I'd like to enable opcache preloading (RFC) on my production servers in PHP 7.4. I'm using Symfony 4 if it changes anything.
Mike Doe
  • 16,349
  • 11
  • 65
  • 88
11
votes
2 answers

Getting an image's original width and height in jQuery

I need to get the original width and height of an image given a specific source. My current method is: img.tag = ""; img.Owidth = 0; img.Oheight = 0; $(img.tag).load(function() { img.Owidth =…
Joey
  • 1,664
  • 3
  • 19
  • 35
9
votes
4 answers

Image preloader javascript that supports events

I am trying to find an image preloader script. While i found a few, none of them supports an event that is triggered when preloading is finished. Does anyone know of any script or jQuery plugin that will do this? Hope this question is appropriate…
SquareCat
  • 5,699
  • 9
  • 41
  • 75
9
votes
4 answers

MP4 in Video.js not playing until fully loaded

I'm using Video.js to play back videos in MP4 format on a client's website. The player uses html5 video and Adobe Flash Player as a fallback. (In my case it seems to use Flash always so I don't know if the problem exists in the native html5 player…
max
  • 91
  • 1
  • 1
  • 2
8
votes
2 answers

webp/jpg - Preloading only the needed type in a html file

i have a website and i am using webp and jpg as a fallback. in the header, i have a bis image and smaller image for mobile users. So i have 4 files: header-big.webp header-small.webp header-big.jpg header-small.jpg Because it is in the header, i…
kanuddel
  • 131
  • 1
  • 6
8
votes
2 answers

Best way to preload images

What's the best way to preload images? I'm trying to create an image tab that has around 59 png images. Here's the code I have so far: …
Poch
  • 369
  • 1
  • 11
  • 24
8
votes
7 answers

Image preloading techniques (for use as hover state CSS background images) don't seem to work on Chrome

I'm using the following technique to pre-load images that are applied as CSS background images when hovering buttons: #preload_area { background-image: url(../images/image1.svg), url(../images/image2.svg); width: 0px; height: 0px; …
drake035
  • 3,955
  • 41
  • 119
  • 229
8
votes
3 answers

Rel PreRender/PreFetch, does it execute JS?

If I had Javascript on the page to prerender/prefetch (such as…
Tom Gullen
  • 61,249
  • 84
  • 283
  • 456
1
2 3
18 19