Implementing game control mechanisms - Game development
the src folder contains the javascript files split as a separate states — boot.js, preloader.js, mainmenu.js and game.js — these are loaded into the index file in this exact order.
... the first one initializes phaser, the second preloads all the assets, the third one controls the main menu welcoming the player, and the fourth controls the actual gameplay.
... every state has its own default methods: preload(), create(), and update().
... the first one is needed for preloading required assets, create() is executed once the state had started, and update() is executed on every frame.

Multimedia: video - Learn web development
optimizing video delivery it's best to compress all video, optimize <source> order, set autoplay, remove audio from muted video, optimize video preload, and consider streaming the video.
...this is the ffmpeg command string to remove audio: ffmpeg -i original.mp4 -an -c:v copy audiofreeversion.mp4 video preload the preload attribute has three available options: auto|metadata|none.
... setting preload="none" results in none of the video being downloaded until playback.
... offering more modest bandwidth savings, setting preload="metadata" may download up to 3% of the video on page load.

mozIStorageConnection
table(in string atablename, in string atableschema); mozistoragependingstatement executeasync([array, size_is(anumstatements)] in mozistoragebasestatement astatements, in unsigned long anumstatements, [optional] in mozistoragestatementcallback acallback ); void executesimplesql(in autf8string asqlstatement); boolean indexexists(in autf8string aindexname); void preload(); obsolete since gecko 1.9 void removefunction(in autf8string afunctionname); mozistorageprogresshandler removeprogresshandler(); void rollbacktransaction(); void setgrowthincrement(in print32 aincrement, in autf8string adatabasename); mozistorageprogresshandler setprogresshandler(in print32 agranularity, in mozistorageprogresshandler ahandler); ...
... preload() obsolete since gecko 1.9 (firefox 3) this is used to preload the database cache.
... this preload operation can dramatically speed up read operations because the data is loaded as one large block.
... void preload(); parameters none.

Network Information API - Web APIs
var connection = navigator.connection || navigator.mozconnection || navigator.webkitconnection; var type = connection.effectivetype; function updateconnectionstatus() { console.log("connection type changed from " + type + " to " + connection.effectivetype); type = connection.effectivetype; } connection.addeventlistener('change', updateconnectionstatus); preload large resources the connection object is useful for deciding whether to preload resources that take large amounts of bandwidth or memory.
... this example would be called soon after page load to check for a connection type where preloading a video may not be desirable.
... if a cellular connection is found, then the preloadvideo flag is set to false.
... let preloadvideo = true; var connection = navigator.connection || navigator.mozconnection || navigator.webkitconnection; if (connection) { if (connection.effectivetype === 'slow-2g') { preloadvideo = false; } } interfaces networkinformation provides information about the connection a device is using to communicate with the network and provides a means for scripts to be notified if the connection type changes.

Configuring servers for Ogg media - HTTP
consider using the preload attribute the html <audio> and <video> elements provide the preload attribute, which tells the browser to attempt to download the entire media when the page loads.
... without preload, the browser only downloads enough of the media to display the first video frame, and to determine the media's duration.
... preload is off by default, so if getting to video is the point of your web page, your users may appreciate it if you include preload in your video elements.
... using preload="metadata" will preload the media file's metadata and possibly the first few frames of video.

Audio for Web games - Game development
buffering and preloading likely as an attempt to mitigate runaway mobile network data use, we also often find that buffering is disabled before playback has been initiated.
...however, preloading is still useful — without it, there would always need to be some client-server communication required before playing can commence.
... mobile support for web audio features mobile browser version concurrent play autoplay volume adjusting preload chrome (android) 69+ y y y y firefox (android) 62+ y y y y edge mobile y y y y opera mobile 46+ y y y y safari (ios) 7+ y/n* n n y android browser 67+ y y y y there's a full compatibility chart for mobile and desktop htmlmediaelement support ...

Scaling - Game development
we can make the game scale to fit on any screen size automatically during the preload stage, so we don't have to worry about it later.
...update your existing preload() function as follows: function preload() { game.scale.scalemode = phaser.scalemanager.show_all; game.scale.pagealignhorizontally = true; game.scale.pagealignvertically = true; } scalemode has a few different options available for how the canvas can be scaled: no_scale — nothing is scaled.
... user_scale — allows you to have custom dynamic scaling, calculating the size, scale and ratio on your own; again, this is more of an advanced mode the other two lines of code in the preload() function are responsible for aligning the canvas element horizontally and vertically, so it is always centered on screen regardless of size.

Experimental features in Firefox
nightly 75 yes developer edition 75 no beta 75 no release 75 no preference name dom.forms.inputmode <link rel="preload"> the <link> element's rel attribute is intended to help provide performance gains by letting you download resources earlier in the page lifecycle, ensuring that they're available earlier and are less likely to block page rendering.
... read preloading content with rel="preload" for more details.
... nightly 78 yes developer edition 78 yes beta 78 yes release 78 no preference name network.preload css display stray control characters in css as hex boxes this feature renders control characters (unicode category cc) other than tab (u+0009), line feed (u+000a), form feed (u+000c), and carriage return (u+000d) as a hexbox when they are not expected.

Cross-browser audio basics - Developer guides
preload the preload attribute allows you to specify a preference for how the browser preloads the audio, in other words, which part of the file it downloads when the <audio> element is initialized, and before the play button is pressed.
... preload can take 3 different values: none: don't download anything before the play button is pressed.
... <audio preload="auto"> ...

Creating a cross-browser video player - Developer guides
<figure id="videocontainer"> <video id="video" controls preload="metadata" poster="img/poster.jpg"> <source src="video/tears-of-steel-battle-clip-medium.mp4" type="video/mp4"> <source src="video/tears-of-steel-battle-clip-medium.webm" type="video/webm"> <source src="video/tears-of-steel-battle-clip-medium.ogg" type="video/ogg"> <!-- flash fallback --> <object type="application/x-shockwave-flash" data="flash-player.swf?videourl=vi...
... a poster image is defined for the video, and the preload attribute is set to metadata, which informs the browser that it should initially only attempt to load the metadata from the video file rather than the entire video file.
...ie9 will only use the specified poster image in this way if preload="none" is set; otherwise, it will take the first still of the video and display that instead.

<audio>: The Embed Audio element - HTML: Hypertext Markup Language
preload this enumerated attribute is intended to provide a hint to the browser about what the author thinks will lead to the best user experience.
... it may have one of the following values: none: indicates that the audio should not be preloaded.
... usage notes: the autoplay attribute has precedence over preload.

<video>: The Video Embed element - HTML: Hypertext Markup Language
preload this enumerated attribute is intended to provide a hint to the browser about what the author thinks will lead to the best user experience with regards to what content is loaded before the video is played.
... it may have one of the following values: none: indicates that the video should not be preloaded.
... note: the autoplay attribute has precedence over preload.

HTML documentation index - HTML: Hypertext Markup Language
226 link types: modulepreload attribute, html, link, link types, reference the modulepreload keyword for the rel attribute of the <link> element provides a declarative way to preemptively fetch a module script and its dependencies, and store them in the document's module map for later evaluation.
... 231 link types: preload attribute, html, link, link types, reference the preload keyword for the rel attribute of the <link> element indicates the user is highly likely to require the target resource for the current navigation, and therefore the browser must preemptively fetch and cache the resource.
... 235 preloading content with rel="preload" guide, html, javascript, link, media, performance, web performance, as, preload, rel the preload value of the <link> element's rel attribute lets you declare fetch requests in the html's <head>, specifying resources that your page will need very soon, which you want to start loading early in the page lifecycle, before browsers' main rendering machinery kick...

Web Performance
this article explains the tls handshake process, and offers some tips for reducing this time, such as ocsp stapling, hsts preload headers, and the potential role of resource hints in masking tls latency for third parties.
...native browser features enable us to hint to the browser when it should connect to another server, or preload a resource before the browser knows it ever needs it.
...in this article, we cover native browser features like rel=preconnect, rel=dns-prefetch, rel=prefetch, and rel=preload, and how to use them to your advantage.

Initialize the framework - Game development
s index.html, in a sensible location, and add the following code to it: <!doctype html> <html> <head> <meta charset="utf-8" /> <title>gamedev phaser workshop - lesson 01: initialize the framework</title> <style>* { padding: 0; margin: 0; }</style> <script src="js/phaser.min.js"></script> </head> <body> <script> var game = new phaser.game(480, 320, phaser.canvas, null, { preload: preload, create: create, update: update }); function preload() {} function create() {} function update() {} </script> </body> </html> downloading the phaser code next, we need to go through the process of downloading the phaser source code and applying it to our html document.
... preload takes care of preloading the assets create is executed once when everything is loaded and ready update is executed on every frame.

Load the assets and print them on screen - Game development
block) and the preload() function: var ball; note: for the sake of this tutorial, we will use global variables.
...add the following new line just inside the preload() function, at the bottom: function preload() { // ...

Video and audio content - Learn web development
take a look at our next example: <video controls width="400" height="400" autoplay loop muted preload="auto" poster="poster.png"> <source src="rabbit320.mp4" type="video/mp4"> <source src="rabbit320.webm" type="video/webm"> <p>your browser doesn't support html video.
... preload used for buffering large files; it can take one of three values: "none" does not buffer the file "auto" buffers the media file "metadata" buffers only the metadata for the file you can find the above example available to play live on github (also see the source code.) note that we haven't included the autoplay attribute in the live version — if the video starts to play as soon...

HTML performance features - Learn web development
elements & attributes impacting performance the <picture> element the <video> element the <source> element the <img> srcset attribute responsive images preloading content with rel="preload" - (https://w3c.github.io/preload/ ) async / defer attributes <iframe> <object> <script> rel attribute conclusion previous overview: performance next in this module the "why" of web performance what is web performance?
... html performance features css performance features fonts and performance mobile performance focusing on performance see also the <picture> element the <video> element the <source> element the <img> srcset attribute responsive images preloading content with rel="preload" - (https://w3c.github.io/preload/ ) ...

Using the Browser API
this is implemented in our sample app with the following functions: browser.addeventlistener('mozbrowserloadstart',function() { stopreload.textcontent = 'x'; }); browser.addeventlistener('mozbrowserloadend',function(e) { canmovebwd(); canmovefwd(); stopreload.textcontent = 'r'; console.log(e.detail.backgroundcolor); controls.style.background = e.detail.backgroundcolor; }); when the mozbrowserloadstart event fires, the latest page request has started loading, and we change the button to a cross to indicate "stop".
... stopreload.addeventlistener('touchend',function() { if(stopreload.textcontent === 'x') { browser.stop(); } else { browser.reload(); } }); implementing the search bar let's now turn our attention to implementing browser search using the browser api.

HTMLLinkElement - Web APIs
specifications specification status comment preload candidate recommendation defines <link rel="preload">, and the as property.
... note that currently firefox only supports preloading of cacheable resources.

Audio and Video Delivery - Developer guides
html audio <audio controls preload="auto"> <source src="audiofile.mp3" type="audio/mpeg"> <!-- fallback for browsers that don't support mp3 --> <source src="audiofile.ogg" type="audio/ogg"> <!-- fallback for browsers that don't support audio tag --> <a href="audiofile.mp3">download audio</a> </audio> the code above will create an audio player that attempts to preload as much audio as possible for smooth playback.
... note: the preload attribute may be ignored by some mobile browsers.

HTML: Hypertext Markup Language
preloading content with rel="preload" the preload value of the <link> element's rel attribute allows you to write declarative fetch requests in your html <head>, specifying resources that your pages will need very soon after loading, which you therefore want to start preloading early in the lifecycle of a page load, before the browser's main rendering machinery kicks in.
...this article provides a basic guide to how preload works.

Scripting - Archive of obsolete content
preload just before the user interface is displayed.

Elements - Archive of obsolete content
you can use this to preload a number of images for later use.

Index - Game development
we can make the game scale to fit on any screen size automatically during the preload stage, so we don't have to worry about it later.

Animations and tweens - Game development
next, we will load the spritesheet — put the following line at the bottom of your preload() function: game.load.spritesheet('ball', 'img/wobble.png', 20, 20); instead of loading a single image of the ball we can load the whole spritesheet — a collection of different images.

Build the brick field - Game development
rendering the brick image next, let's load the image of the brick — add the following load.image() call just below the others: function preload() { // ...

Buttons - Game development
add the following to the bottom of the preload() function: game.load.spritesheet('button', 'img/button.png', 120, 40); a single button frame is 120 pixels wide and 40 pixels high.

Physics - Game development
final code check the latest code should look like this: var ball; function preload() { game.scale.scalemode = phaser.scalemanager.show_all; game.scale.pagealignhorizontally = true; game.scale.pagealignvertically = true; game.stage.backgroundcolor = '#eee'; game.load.image('ball', 'img/ball.png'); } function create() { game.physics.startsystem(phaser.physics.arcade); ball = game.add.sprite(50, 50, 'ball'); game.physics.enable(ball, phaser.physics...

Player paddle and controls - Game development
loading the paddle first, add the paddle variable we will be using in our game, right after the ball variable: var paddle; then, in the preload function, load the paddle image by adding the following new load.image() call: function preload() { // ...

Certificate authority - MDN Web Docs Glossary: Definitions of Web-related terms
web browsers come preloaded with a list of certificate authorities trusted to issue digital certificates.

Prefetch - MDN Web Docs Glossary: Definitions of Web-related terms
the prefetch hints are sent in http headers: link: ; rel=dns-prefetch, ; as=script; rel=preload, ; rel=prerender, ; as=style; rel=preload prefetch attribute value browsers will prefetch content when the prefetch <link> tag directs it to, giving the developer control over what resources should be prefetched.

Tips for authoring fast-loading HTML pages - Learn web development
if any images are used for rollover effects, you should preload them here after the page content has downloaded.

Responsive images - Learn web development
when the browser starts to load a page, it starts to download (preload) any images before the main parser has started to load and interpret the page's css and javascript.

Web performance resources - Learn web development
using resource hints such as rel=preconnect, rel=dns-prefetch, rel=prefetch, and rel=preload keep the size of javascript to a minimum.

What is web performance? - Learn web development
a general strategy is to make your files as small as possible, reduce the number of http requests made as much as possible, and employ clever loading techniques (such as preload) to make files available sooner.

Handling common HTML and CSS problems - Learn web development
for example: <video id="video" controls preload="metadata" poster="img/poster.jpg"> <source src="video/tears-of-steel-battle-clip-medium.mp4" type="video/mp4"> <source src="video/tears-of-steel-battle-clip-medium.webm" type="video/webm"> <!-- offer download --> <p>your browser does not support html5 video; here is a link to <a href="video/tears-of-steel-battle-clip-medium.mp4">view the video</a> directly.</p> </video> this example i...

Eclipse CDT
instead of processing build console output, eclipse could use something like ld_preload to load its own little library into all the processes that are invoked as part of the build process.

mozbrowserloadend
var browser = document.queryselector("iframe"); browser.addeventlistener('mozbrowserloadend',function(e) { stopreload.textcontent = 'r'; console.log(e.detail.backgroundcolor); controls.style.background = e.detail.backgroundcolor; }); browser.addeventlistener('mozbrowserloadend',function() { stopreload.textcontent = 'r'; }); related events mozbrowserasyncscroll mozbrowserclose mozbrowsercontextmenu mozbrowsererror mozbrowsericonchange mozbrowserloadstart mozbrowserlocationchange mozbrowseropenwi...

mozbrowserloadstart
var browser = document.queryselector("iframe"); browser.addeventlistener('mozbrowserloadstart',function() { stopreload.textcontent = 'x'; }); browser.addeventlistener('mozbrowserloadend',function() { stopreload.textcontent = 'r'; }); related events mozbrowserasyncscroll mozbrowserclose mozbrowsercontextmenu mozbrowsererror mozbrowsericonchange mozbrowserloadend mozbrowserlocationchange mozbrowseropenwindow mozbrowsersecuritychange mozbrowsershowmodalprompt mozbrowsertitlechange mozbrowserusernam...

HTMLIFrameElement.reload()
examples stopreload.addeventlistener('touchend',function() { if(stopreload.textcontent === 'x') { browser.stop(); } else { browser.reload(); } }); specification not part of any specification.

HTMLIFrameElement.stop()
examples stopreload.addeventlistener('touchend',function() { if(stopreload.textcontent === 'x') { browser.stop(); } else { browser.reload(); } }); specification not part of any specification.

HTML parser threading
speculative loads when the tree builder on the parser thread encounters html script, stylesheet link, video (with a poster frame), base or img or svg script, style or image elements, preload operations are appended to a speculative load queue.

FUEL
bjects extiapplication objects extiapplication exticonsole extieventitem extieventlistener extievents extiextension extiextensions extipreference extipreferencebranch extisessionstorage fueliapplication objects fueliannotations fueliapplication fuelibookmark fuelibookmarkfolder fuelibookmarkroots fuelibrowsertab fueliwindow xpcom although the fuel application object is preloaded into xul scripts, it is not preloaded into javascript xpcom code.

SMILE
objects extiapplication objects exticonsole extieventitem extieventlistener extievents extiextension extiextensions extipreference extipreferencebranch extisessionstorage smileiapplication objects smileibookmarkroots smileiwindow smileibrowsertab smileiapplication xpcom although the extiapplication object is preloaded into xul scripts, it is not preloaded into javascript xpcom code.

STEEL
objects extiapplication objects extiapplication exticonsole extieventitem extieventlistener extievents extiextension extiextensions extipreference extipreferencebranch extisessionstorage steeliapplication objects steeliapplication xpcom although the steel steeliapplication object is preloaded into xul scripts, it is not preloaded into javascript xpcom code.

extIApplication
xpcom although the application object is preloaded into xul scripts, it is not preloaded into javascript xpcom code.

Mail composition back end
const struct nsmsgattachedfile *preloaded_attachments, - attachments that are already locally stored on disk (note: both attachments and preloaded_attachments cannot be specified on a single call void *relatedpart /* nsmsgsendpart */, - a related part for multipart related operations nsimsgsendlistener **alistenerarray) = 0; - an array of listeners fo...

Network request details - Firefox Developer Tools
see https://en.wikipedia.org/wiki/special:centralautologin/p3p for more info.\"" }, { "name": "server", "value": "mw1316.eqiad.wmnet" }, { "name": "server-timing", "value": "cache;desc=\"pass\"" }, { "name": "strict-transport-security", "value": "max-age=106384710; includesubdomains; preload" }, { "name": "vary", "value": "accept-encoding,treat-as-untrusted,x-forwarded-proto,cookie,authorization,x-seven" }, { "name": "via", "value": "1.1 varnish (varnish/5.1), 1.1 varnish (varnish/5.1)" }, { "name": "x-analytics", "value": "ns=-1;special=badtitle;wmf-last-access=11-jun-2019;wmf-last-access-global=11-j...

AnalyserNode.getFloatFrequencyData() - Web APIs
microphone input const audioele = new audio(); audioele.src = 'my-audio.mp3';//insert file name here audioele.autoplay = true; audioele.preload = 'auto'; const audiosourcenode = audioctx.createmediaelementsource(audioele); //create analyser node const analysernode = audioctx.createanalyser(); analysernode.fftsize = 256; const bufferlength = analysernode.frequencybincount; const dataarray = new float32array(bufferlength); //set up audio node network audiosourcenode.connect(analysernode); analysernode.connect(audioctx.destination); //cr...

Manipulating video using canvas - Web APIs
canvas c1 is used to display the current frame of the original video, while c2 is used to display the video after performing the chroma-keying effect; c2 is preloaded with the still image that will be used to replace the green background in the video.

FetchEvent() - Web APIs
preloadresponse read only a promise which returns a previously-loaded response to the client.

FetchEvent - Web APIs
fetchevent.preloadresponse read only a promise for a response, or undefined if this fetch is not a navigation, or navigation preload is not enabled.

Audio() - Web APIs
return value a new htmlaudioelement object, configured to be used for playing back the audio from the file specified by url.the new object's preload property is set to auto and its src property is set to the specified url or null if no url is given.

HTMLLinkElement.as - Web APIs
specifications specification status comment preloadthe definition of 'as' in that specification.

HTMLMediaElement.load() - Web APIs
the amount of media data that is prefetched is determined by the value of the element's preload attribute.

HTMLMediaElement.networkState - Web APIs
<audio id="example" preload="auto"> <source src="sound.ogg" type="audio/ogg" /> </audio> var obj = document.getelementbyid('example'); obj.addeventlistener('playing', function() { if (obj.networkstate === 2) { // still loading...

HTMLMediaElement.readyState - Web APIs
<audio id="example" preload="auto"> <source src="sound.ogg" type="audio/ogg" /> </audio> var obj = document.getelementbyid('example'); obj.addeventlistener('loadeddata', function() { if(obj.readystate >= 2) { obj.play(); } }); specifications specification status comment html living standardthe definition of 'htmlmediaelement.readystate' in that specification.

HTMLMediaElement - Web APIs
htmlmediaelement.preload is a domstring that reflects the preload html attribute, indicating what data should be preloaded, if any.

IDBCursor.continuePrimaryKey() - Web APIs
= 0; let unreadlist = []; request.onsuccess = (event) => { let cursor = event.target.result; if (!cursor) { return; } let lastprimarykey = getlastiteratedarticleid(); if (lastprimarykey > cursor.primarykey) { cursor.continueprimarykey("javascript", lastprimarykey); return; } // update lastiteratedarticleid setlastiteratedarticleid(cursor.primarykey); // preload 5 articles into the unread list; unreadlist.push(cursor.value); if (++count < 5) { cursor.continue(); } }; specifications specification status comment indexed database api draftthe definition of 'continueprimarykey()' in that specification.

ServiceWorkerRegistration - Web APIs
an active worker will control a serviceworkerclient if the client's url falls within the scope of the registration (the scope option set when serviceworkercontainer.register is first called.) serviceworkerregistration.navigationpreload read only returns the instance of navigationpreloadmanager associated with the current service worker registration.

Service Worker API - Web APIs
navigationpreloadmanager provides methods for managing the preloading of resources with a service worker.

Synchronous and asynchronous requests - Web APIs
this pattern can be useful, for example in order to interact with the server in the background, or to preload content.

Web APIs
mtrackevent mediatrackconstraints mediatracksettings mediatracksupportedconstraints merchantvalidationevent messagechannel messageevent messageport metadata mimetype mimetypearray mouseevent mousescrollevent mousewheelevent mutationevent mutationobserver mutationobserverinit mutationrecord n ndefmessage ndefreader ndefreadingevent ndefrecord ndefwriter namelist namednodemap navigationpreloadmanager navigator navigatorconcurrenthardware navigatorid navigatorlanguage navigatoronline navigatorplugins navigatorstorage networkinformation node nodefilter nodeiterator nodelist nondocumenttypechildnode notation notification notificationaction notificationevent notifyaudioavailableevent o oes_element_index_uint oes_fbo_render_mipmap oes_standard_derivatives oes_texture_float oes_...

prefers-reduced-data - CSS: Cascading Style Sheets
in this example the montserrat-regular.woff2 font file will neither be preloaded nor downloaded if the user prefers reduced data, in this case the "system font stack" will serve as the fallback font: html <head> <link rel="preload" href="fonts/montserrat-regular.woff2" as="font" media="(prefers-reduced-data: no-preference)" crossorigin> <link rel="stylesheet" href="style.css"> </head> css @media (prefers-reduced-data: no-preference) { @font-face { font-...

Adding captions and subtitles to HTML5 video - Developer guides
we actually have our subtitles in three different languages — english, german, and spanish — so we will reference all three of the relevant vtt files by adding <track> elements inside our html5 <video> element: <video id="video" controls preload="metadata"> <source src="video/sintel-short.mp4" type="video/mp4"> <source src="video/sintel-short.webm" type="video/webm"> <track label="english" kind="subtitles" srclang="en" src="captions/vtt/sintel-en.vtt" default> <track label="deutsch" kind="subtitles" srclang="de" src="captions/vtt/sintel-de.vtt"> <track label="español" kind="subtitles" srclang="es" src="captions/vtt/sintel...

Media buffering, seeking, and time ranges - Developer guides
the html for our player looks like this: <audio id="my-audio" preload controls> <source src="music.mp3" type="audio/mpeg"> </audio> <div class="buffered"> <span id="buffered-amount"></span> </div> <div class="progress"> <span id="progress-amount"></span> </div> we'll use the following css to style the buffering display: .buffered { height: 20px; position: relative; background: #555; width: 300px; } #buffered-amount { display: block; height: 10...

HTML attribute reference - HTML: Hypertext Markup Language
preload <audio>, <video> indicates whether the whole resource, parts of it or nothing should be preloaded.

HTTP Index - HTTP
220 103 early hints draft, http, informational, needscompattable, needscontent, status code the http 103 early hints information response status code is primarily intended to be used with the link header to allow the user agent to start preloading resources while the server is still preparing a response.

103 Early Hints - HTTP
the http 103 early hints information response status code is primarily intended to be used with the link header to allow the user agent to start preloading resources while the server is still preparing a response.

HTTP response status codes - HTTP
103 early hints this status code is primarily intended to be used with the link header, letting the user agent start preloading resources while the server prepares a response.

Lazy loading - Web Performance
it is possible to override the default behaviour and preload web font resources using <link rel="preload">, the css font-display property, and the font loading api.

Optimizing startup performance - Web Performance
utilize resource hints (like preconnect or preload) whenever possible to indicate to the browser which files are more critical for your application.

The building blocks of responsive design - Progressive web apps (PWAs)
this way, you can swap out image src values with javascript depending on browser features, circumventing browser preloading issues.