Search completed in 2.96 seconds.
818 results for "loading":
Your results are loading. Please wait...
Uploading and Downloading Files - Archive of obsolete content
file and stream guide: [ nsiscriptableio | accessing files | getting file information | reading from files | writing to files | moving, copying and deleting files | uploading and downloading files | working with directories ] important note: the pages from the file and stream guide use the io object (nsiscriptableio), which was not available in any released version of the platform (pending some fixes).
...this is a common technique for uploading files as it is compatible with existing servers and formdata interface makes that task fairly simple.
... fetch upload please refer to uploading a file section inside the fetch article.
... downloading files under construction...
Progressive loading - Progressive web apps (PWAs)
in this article we will go even further and improve the performance of the app by progressively loading its resources.
... this could be achieved by progressive loading — also known as lazy loading.
... this is all about deferring loading of as many resources as possible (html, css, javascript), and only loading those immediately that are really needed for the very first experience.
...And 11 more matches
Tips for authoring fast-loading HTML pages - Learn web development
more information: http conditional get for rss hackers http 304: not modified http etag on wikipedia caching in http optimally order the components of the page download page content first, along with any css or javascript that may be required for its initial display, so that the user gets the quickest apparent response during the page loading.
... any dynamic features that require the page to complete loading before being used, should be initially disabled, and then only enabled after the page has loaded.
... reduce the number of inline scripts inline scripts can be expensive for page loading since the parser must assume that an inline script could modify the page structure while parsing is in progress.
...And 8 more matches
Appendix D: Loading Scripts - Archive of obsolete content
most add-ons and xul runner applications provide their primary functionality by loading and executing javascript code.
...below is an overview of the more common means of loading scripts, along with some of their primary advantages, disadvantages, quirks, and use cases.
... <script> tags xul script tags are traditionally the primary means of loading scripts for extension developers.
...And 6 more matches
HTMLImageElement.loading - Web APIs
the htmlimageelement property loading is a string whose value provides a hint to the user agent that tells the browser how to handle loading images which are currently outside the window's visual viewport.
... this helps to optimize the loading of the document's contents by postponing loading the image until it's expected to be needed, rather than immediately during the initial page load.
... syntax let imageloadscheduling = htmlimageelement.loading; htmlimageelement.loading = eagerorlazy; value a domstring providing a hint to the user agent as to how to best schedule the loading of the image to optimize page performance.
...And 6 more matches
Lazy loading - Web Performance
lazy loading is a strategy to identify resources as non-blocking (non-critical) and load these only when needed.
... lazy loading can occur on different moments in the application, but it typically happens on some user interactions such as scrolling and navigation.
... one of the methods we can use to tackle this problem is to shorten the critical rendering path length by lazy loading resources that are not critical for the first render to happen.
...And 6 more matches
Downloading Files - Archive of obsolete content
the following methods of downloading files may not work as expected after firefox 26, and should no longer be used.
... downloading files to download a file, create an instance of nsiwebbrowserpersist and call its nsiwebbrowserpersist.saveuri() method, passing it a url to download and an nsifile instance representing the local file name/path.
...gutils.jsm"); const webbrowserpersist = components.constructor("@mozilla.org/embedding/browser/nswebbrowserpersist;1", "nsiwebbrowserpersist"); var persist = webbrowserpersist(); var targetfile = services.dirsvc.get("desk", ci.nsifile); targetfile.append("file.bin"); // obtain the privacy context of the browser window that the url // we are downloading comes from.
...And 5 more matches
Preloading content with rel="preload" - HTML: Hypertext Markup Language
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 kicks in.
...using as to specify the type of content to be preloaded allows the browser to: prioritize resource loading more accurately.
...this is especially useful when preloading resources — the browser will use the type attribute value to work out if it supports that resource, and will only download it if so, ignoring it if not.
...And 4 more matches
Frame script loading and lifetime
loading frame scripts to load a frame script use the loadframescript() function.
... if you use allowdelayedload, you can cancel it by using removedelayedframescript: var mm = window.messagemanager; mm.removedelayedframescript("chrome://my-e10s-extension/content/frame-script.js"); this means we will stop loading the script into new tabs.
... unloading frame scripts frame scripts are automatically unloaded when their hosting tab is closed.
...if you did not set the third argument to true in bootstrap.js on services.mm.addmessagelistener, sending this message during, and after, the unloading event will do nothing.
Downloading JSON and JavaScript in extensions - Archive of obsolete content
downloading json if the extension is downloading json, then the developer should be using one of the json decoding methods discussed here and not using eval() at all.
...downloading state from a remote webserver using json is becoming extremely popular.
... downloading javascript of course there are times when javascript code modules are downloaded and injected into the extension.
CSS Font Loading API - Web APIs
the css font loading api provides events and interfaces for dynamically loading font resources.
... fontfaceset an interface loading font faces and checking their download statuses.
... specifications specification status comment css font loading module level 3 working draft initial definition.
:-moz-loading - CSS: Cascading Style Sheets
the :-moz-loading css pseudo-class is a mozilla extension that matches elements that can't be displayed because they have not started loading, such as images that haven't started to arrive yet.
... note that images that are in the process of loading are not matched by this pseudo-class.
... syntax :-moz-loading examples setting a background for images that are loading :-moz-loading { background-color: #aaa; background-image: url(loading-animation.gif) center no-repeat; } specifications not part of any standard.
Loading Content Scripts - Archive of obsolete content
the constructors for content-script-using objects such as panel and page-mod define a group of options for loading content scripts: contentscript string, array contentscriptfile string, array contentscriptwhen string contentscriptoptions object we have already seen the contentscript option, which enables you to pass in the text of the script itself as a string literal.
...at this point, content scripts are able to interact with the dom content, but externally-referenced stylesheets and images may not have finished loading.
PerformanceTiming.domLoading - Web APIs
the legacy performancetiming.domloading read-only property returns an unsigned long long representing the moment, in miliseconds since the unix epoch, when the parser started its work, that is when its document.readystate changes to 'loading' and the corresponding readystatechange event is thrown.
... syntax time = performancetiming.domloading; specifications specification status comment navigation timingthe definition of 'performancetiming.domloading' in that specification.
Page Loading - Archive of obsolete content
page loading on page load how to execute code each time a new page is loaded in browser/mail progress listeners progress listeners allow extensions to be notified of events associated with documents loading in the browser and with tab switching events.
downloading - Archive of obsolete content
the downloading event is fired after checking for an application cache update, if the user agent has found an update and is fetching it, or is downloading the resources listed by the cache manifest for the first time.
Document Loading - From Load Start to Finding a Handler - Archive of obsolete content
this document describes the beginning of the document loading process.
Safely loading URIs - Archive of obsolete content
for example, loading some file: uris can hang the browser or even crash the operating system in some cases.
Loading and running WebAssembly code - WebAssembly
we then use the onload event handler to invoke a function when the response has finished downloading — in this function we get the array buffer from the response property, and then feed that into our webassembly.instantiate() method as we did with fetch.
Index - Web APIs
WebAPIIndex
392 css font loading api api, cssfontloading, experimental, fonts, needscontent, reference the css font loading api provides events and interfaces for dynamically loading font resources.
... 913 document.fonts api, dom, font loading api, fontface, fontfaceset, fonts, font the fonts property of the document interface returns the fontfaceset interface of the document.
... 936 document.location api, document, html dom, property, read-only, reference the document.location read-only property returns a location object, which contains information about the url of the document and provides methods for changing that url and loading another url.
...And 63 more matches
nsIIOService
scheme(in autf8string urlstring); unsigned long getprotocolflags(in string ascheme); nsiprotocolhandler getprotocolhandler(in string ascheme); nsichannel newchannel(in autf8string aspec, in string aorigincharset, in nsiuri abaseuri); obsolete since gecko 48 nsichannel newchannel2(in autf8string aspec, in string aorigincharset, in nsiuri abaseuri, in nsidomnode aloadingnode, in nsiprincipal aloadingprincipal, in nsiprincipal atriggeringprincipal, in uint32_t asecurityflags, in uint32_t acontentpolicytype); nsichannel newchannelfromuri(in nsiuri auri); obsolete since gecko 48 nsichannel newchannelfromuri2(in nsiuri auri, in nsidomnode aloadingnode, in nsiprincipal aloadingprincipal, in nsiprincipal atriggeringprincipal, in unsigned long asecuri...
...tyflags, in unsigned long acontentpolicytype); nsichannel newchannelfromuriwithloadinfo(in nsiuri auri, in nsiloadinfo aloadinfo); nsichannel newchannelfromuriwithproxyflags2(in nsiuri auri, in nsiuri aproxyuri, in uint32_t aproxyflags,in nsidomnode aloadingnode, in nsiprincipal aloadingprincipal, in nsiprincipal atriggeringprincipal, in uint32_t asecurityflags, in uint32_t acontentpolicytype); nsiuri newfileuri(in nsifile afile); nsiuri newuri(in autf8string aspec, in string aorigincharset, in nsiuri abaseuri); attributes attribute type description offline boolean returns true if networking is in "offline" mode.
... nsichannel newchannel2( in autf8string aspec, in string aorigincharset, in nsiuri abaseuri, in nsidomnode aloadingnode, in nsiprincipal aloadingprincipal, in nsiprincipal atriggeringprincipal, in uint32_t asecurityflags, in uint32_t acontentpolicytype, ); parameters aspec the spec for the desired uri.
...And 35 more matches
Index - Archive of obsolete content
18 interacting with page scripts add-on sdk, add-ons, extensions by default, content scripts loaded by add-ons and scripts loaded by web pages are insulated from each other: 19 loading content scripts no summary!
...unfortunately, javascript does not yet have native support for modules: it has to rely on the host application to provide it with functionality such as loading subscripts, and exporting/ importing names.
... 181 downloading files code snippets to download a file, create an instance of nsiwebbrowserpersist and call its nsiwebbrowserpersist.saveuri() method, passing it a url to download and an nsifile instance representing the local file name/path.
...And 23 more matches
Event reference
abort the loading of a resource has been aborted.
... load a resource and its dependent resources have finished loading.
... loadeddata the first frame of the media has finished loading.
...And 11 more matches
Perceived performance - Learn web development
how fast a website feels like it's loading and rendering has a greater impact on user experience than how fast the website actually loads and renders.
... even if an operation is going to take a long time (because of latency or or inavailability of the main thread), it is possible to keep the user engaged while they wait by showing a loading spinner, or a series of useful hints and tips (or jokes, or whatever else you think might be appropriate).
...first contentful paint (fcp) reports the time when the browser first rendered anything of signifigance, be that text, foreground or background image, or a canvas or svg; capturing the very beginning of the loading experience.
...And 9 more matches
Application cache implementation overview
loading a top level document from offline cache this happens in nshttpchannel::opencacheentry().
... all top level document loading (navigation) channels are set chooseapplicationcache flag, which happens in nsdocshell::douriload().
...if no nsiapplicationcache object has been found, there is no offline cache to load from and the load continues a usual way by loading from normal http cache, further steps are not executed.
...And 9 more matches
nsIDocShell
reading this value reports the encoding that was used when loading the data into the document.
... busy_flags_none 0 returned by the busyflags attribute when the nsidocshell is not loading a document.
... busy_flags_busy 1 returned by the busyflags attribute when the nsidocshell is loading a document from the network.
...And 8 more matches
Modules - Archive of obsolete content
unfortunately, javascript does not yet have native support for modules: it has to rely on the host application to provide it with functionality such as loading subscripts, and exporting/ importing names.
... the module system used by the sdk is based on the commonjs specification: it is implemented using a loader object, which handles all the bookkeeping related to module loading, such as resolving and caching urls.
... loading subscripts when a javascript project reaches a certain size, it becomes necessary to split it up into multiple files.
...And 7 more matches
Web Performance
it is important to minimize the loading and response times and add additional features to conceal latency by making the experience as available and interactive as possible, as soon as possible, while asynchronously loading in the longer tail parts of the experience.
...if your animations are really complex, you may have to rely on javascript-based animations instead.lazy loadinglazy loading is a strategy to identify resources as non-blocking (non-critical) and load these only when needed.
...resource timings are detailed network timing measurements regarding the loading of an application's resources.optimizing startup performanceregardless of platform, it's always a good idea to start up as quickly as possible.
...And 7 more matches
Audio for Web games - Game development
this is usually mitigated against by loading the audio in advance and priming it on a user-initiated event.
... 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.
... buffering is the process of the browser downloading the media in advance, which we often need to do to ensure smooth playback.
...And 6 more matches
HTTP Index - HTTP
WebHTTPIndex
such requests can be useful to validate the content of a cache, and sparing a useless control, to verify the integrity of a document, like when resuming a download, or when preventing to lose updates when uploading or modifying a document on the server.
... 78 csp: block-all-mixed-content csp, content-security-policy, directive, http, mixed content, reference, security, block-all-mixed-content the http content-security-policy (csp) block-all-mixed-content directive prevents loading any assets using http when the page is loaded using https.
... 85 csp: frame-src csp, content-security-policy, directive, frame, http, reference, security, frame-src, source the http content-security-policy (csp) frame-src directive specifies valid sources for nested browsing contexts loading using elements such as <frame> and <iframe>.
...And 6 more matches
What is web performance? - Learn web development
a loading spinner)?
...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.
... making the site usable as soon as possible: this basically means loading your web site assets in a sensible order so that the user can start to actually use it really quickly.
...And 5 more matches
FontFaceSet - Web APIs
the fontfaceset interface of the css font loading api manages the loading of font-faces and querying of their download status.
... properties fontfaceset.status read only indicates the font-face's loading status.
... it will be one of 'loading' or 'loaded'.
...And 5 more matches
Index of archived content - Archive of obsolete content
dd-on sdk builder guides content scripts communicating with other scripts communicating using "port" communicating using "postmessage" cross-domain content scripts interacting with page scripts loading content scripts reddit example port self contributor's guide classes and inheritance content processes getting started modules private properties fir...
... bootstrapped extensions code snippets alerts and notifications autocomplete bookmarks boxes canvas code snippets cookies customizing the download progress bar delayed execution dialogs and prompts downloading files drag & drop embedding svg examples and demos from articles file i/o finding window handles forms related code snippets html in xul for rich tooltips html to dom isdefaultnamespace js xpcom javascript debugger service javascript timers ...
... javascript daemons management label and description lookupnamespaceuri lookupprefix miscellaneous modules on page load page loading post data to window preferences progress listeners queryselector rosetta running applications svg animation svg general scrollbar sidebar stringview tabbox toolbar tree uri parsing view source for xul applications windows xml-related code snippets xml:base support in old browse...
...And 4 more matches
What is JavaScript? - Learn web development
you will learn ways around this later in the article, in the script loading strategies section.
... script loading strategies there are a number of issues involved with getting scripts to load at the right time.
... in the external example, we use a more modern javascript feature to solve the problem, the defer attribute, which tells the browser to continue downloading the html content once the <script> tag element has been reached.
...And 4 more matches
Multimedia: Images - Learn web development
loading strategy one of the biggest improvements to most websites is lazy-loading images beneath-the-fold, rather than downloading them all on initial page load regardless of whether a visitor scrolls to see them or not.
... beyond loading a subset of images, next you should look into the format of the images themselves: are you loading the most optimal file formats?
... are you loading the correct sizes?
...And 4 more matches
Using the Browser API
MozillaGeckoChromeAPIBrowser APIUsing
demo to demonstrate basic usage of this api, we have created a simple browser api demo that provides buttons allowing you to (re)load web pages, stop loading, move forward and back in history, and zoom in and out of the page.
...when you press the keyboard's return button, the 'submit' event is fired, which we handle like this: urlform.addeventlistener('submit',function(e) { e.preventdefault(); browser.src = urlbar.value; urlbar.blur(); }); we first call preventdefault() to stop the form just submitting and reloading the page — which is really not what we want.
...as in a traditional browser, this is a single button that acts as a reload button when the page has finished loading, and a stop button while the page is loading (each with a different icon displayed).
...And 4 more matches
Document.readyState - Web APIs
the document.readystate property describes the loading state of the document.
... syntax var string = document.readystate; values the readystate of a document can be one of following: loading the document is still loading.
... interactive the document has finished loading and the document has been parsed but sub-resources such as images, stylesheets and frames are still loading.
...And 4 more matches
Navigation and resource timings - Web Performance
resource timings are detailed network timing measurements regarding the loading of an application's resources.
... the general performance timings below have been deprecated in favor of the performance entry api, which provides for marking and measuring times along the navigation and resource loading process.
... performance timings the performancetiming api, a javascript api for measuring the loading performance of the requested page, is deprecated but supported in all browsers.
...And 4 more matches
tabs - Archive of obsolete content
usage open a tab you can open a new tab, specifying various properties including location: var tabs = require("sdk/tabs"); tabs.open("http://www.example.com"); track tabs you can register event listeners to be notified when tabs open, close, finish loading dom content, or are made active or inactive: var tabs = require("sdk/tabs"); // listen for tab openings.
...tabs.open({ url: "http://www.mysite.com", ispinned: true, onopen: function onopen(tab) { // do stuff like listen for content // loading.
...it has one of four possible values: "uninitialized": the tab's document is not yet loading "loading": the tab's document is still in the process of loading "interactive": the tab's document has loaded and is parsed, but resources such as images and stylesheets may still be loading "complete": the tab's document and all resources are fully loaded once a tab's readystate has entered "interactive", you can retrieve properties such as the document's url.
...And 3 more matches
How to convert an overlay extension to restartless - Archive of obsolete content
if you want to also make your add-on extractionless then you may need "step 3" if you're loading files with nsifileinputstream or something similar, or a jar: uri might work.
...xmlhttprequest is an api created by microsoft, adopted by mozilla and other vendors, and hacked into a swiss army knife of file loading.
...once you've got the machinery to load and save preferences without having to jump through the various pref type hoops the actual preferences api sends you through, loading the actual preferences file is one line.
...And 3 more matches
2D maze game with device orientation - Game development
managing game states the states in phaser are separate parts of the game logic; in our case we’re loading them from independent javascript files for better maintainability.
... var ball = { _width: 320, _height: 480 }; ball.boot = function(game) {}; ball.boot.prototype = { preload: function() { this.load.image('preloaderbg', 'img/loading-bg.png'); this.load.image('preloaderbar', 'img/loading-bar.png'); }, create: function() { this.game.scale.scalemode = phaser.scalemanager.show_all; this.game.scale.pagealignhorizontally = true; this.game.scale.pagealignvertically = true; this.game.state.start('preloader'); } }; the main ball object is defined and we're adding two variables call...
...we're loading two images first that will be used later in the preload state to show the progress of loading all the other assets.
...And 3 more matches
The "why" of web performance - Learn web development
while an individual's perception of site performance performance is subjective, loading and rendering can be measured.
... as an example, consider the loading experience of cnn.com, which at the time of this writing had over 400 http requests with a file size of over 22.6mb.
... imagine loading this on a desktop computer connected to a fibre optic network.
...And 3 more matches
Introduction to automated testing - Learn web development
rts.js = js; exports.build = build; /* * define default task that can be called by just running `gulp` from cli */ exports.default = build; further ideas once this is all set up, you can run the gulp command inside your project directory, and you should get an output like this: you can then try out the files output by your automated tasks by looking at them inside the build directory, and loading build/index.html in your web browser.
... as you click on the start button, a loading screen will appear, providing you with a vm (virtual machine) based on your configurations.
... when you click start session, a loading screen will then appear, which spins up a virtual machine running the combination you chose.
...And 3 more matches
Handling common JavaScript problems - Learn web development
after the packages have finished installing, try loading up a javascript file: you'll see any issues highlighted with green (for warnings) and red (for errors) circles next to the line numbers, and a separate panel at the bottom provides line numbers, error messages, and sometimes suggested values or other fixes.
...some quick tips are as follows: to avoid loading more javascript than you need, bundle your scripts into a single file using a solution like browserify.
... library usage at a basic level tends to consist of downloading the library's files (javascript, possibly some css or other dependencies too) and attaching them to your page (e.g.
...And 3 more matches
Gecko info for Windows accessibility vendors
gecko also helps determine when to load a new window by firing two event_state_change's on the root role_document accessible -- the first state change indicates the document pane is now busy loading.
...when the document has finished loading the busy flag will be cleared.
...it's also used in the root pane object to show when the state_busy flag changes from loading new content.
...And 3 more matches
A brief guide to Mozilla preferences
it provides a general overview of mozilla preferences, including where preferences are stored, a file-by-file analysis of preference loading sequence, and information on editing preferences.
... preferences files to protect privacy by preventing inadvertent loading of a preferences file in the browser, the first line of the file is made un-parseable and skipped on loading.
... preferences loading and resolution on application launch, the application loads preferences in the following order: load all default pref files.
...And 3 more matches
Using files from web applications - Web APIs
next, we establish the filereader to handle asynchronously loading the image and attaching it to the img element.
... here is a live demo of the code above: example: uploading a user-selected file another thing you might want to do is let the user upload the selected file or files (such as the images selected using the previous example) to a server.
...this allows us to select all of the images the user has chosen for uploading using document.queryselectorall(), like this: function sendfiles() { const imgs = document.queryselectorall(".obj"); for (let i = 0; i < imgs.length; i++) { new fileupload(imgs[i], imgs[i].file); } } line 2 fetches a nodelist, called imgs, of all the elements in the document with the css class obj.
...And 3 more matches
Ajax navigation example - Web APIs
to see how it works, please create the following files (or git clone https://github.com/giabao/mdn-ajax-nav-example.git ): note: for fully integrating the <form> elements within this mechanism, please take a look at the paragraph submitting forms and uploading files.
...rd example</a> | <a class="ajax-nav" href="unexisting.php">unexisting page</a> ] </p> include/header.php: <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <script type="text/javascript" src="js/ajax_nav.js"></script> <link rel="stylesheet" href="css/style.css" /> js/ajax_nav.js: "use strict"; const ajaxrequest = new (function () { function closereq () { oloadingbox.parentnode && document.body.removechild(oloadingbox); bisloading = false; } function abortreq () { if (!bisloading) { return; } oreq.abort(); closereq(); } function ajaxerror () { alert("unknown error."); } function ajaxload () { var vmsg, nstatus = this.status; switch (nstatus) { case 200: ...
..."&" + sviewkey + "=" + sviewmode : "").slice(1)).replace(rendqstmark, ""); } function getpage (spage) { if (bisloading) { return; } oreq = new xmlhttprequest(); bisloading = true; oreq.onload = ajaxload; oreq.onerror = ajaxerror; if (spage) { opageinfo.url = filterurl(spage, null); } oreq.open("get", filterurl(opageinfo.url, "json"), true); oreq.send(); oloadingbox.parentnode || document.body.appendchild(oloadingbox); } function requestpage ...
...And 3 more matches
Using the Resource Timing API - Web APIs
the resource timing api provides a way to retrieve and analyze detailed network timing data regarding the loading of an application's resource(s).
... the interface's properties create a resource loading timeline with high-resolution timestamps for network events such as redirect start and end times, fetch start, dns lookup start and end times, response start and end times, etc.
... resource loading phases an application can get timestamps for the various phases of resource loading such as redirection, dns lookup, and tcp connection setup.
...And 3 more matches
Resource Timing API - Web APIs
the resource timing interfaces enable retrieving and analyzing detailed network timing data regarding the loading of an application's resource(s).
... the interface's properties create a resource loading timeline with high-resolution timestamps for network events such as redirect start and end times, dns lookup start and end times, request start, response start and end times, etc.
... resource loading timestamps an application can get timestamps for the various stages used to load a resource.
...And 3 more matches
Using textures in WebGL - Web APIs
loading textures the first thing to do is add code to load the textures.
... note: it's important to note that the loading of textures follows cross-domain rules; that is, you can only load textures from sites for which your content has cors approval.
...// when the image finished loading copy it into the texture.
...And 3 more matches
Advanced techniques: Creating and sequencing audio - Web APIs
we're going to introduce sample loading, envelopes, filters, wavetables, and frequency modulation.
...the techniques we are using are: name of voice technique associated web audio api feature "sweep" oscillator, periodic wave oscillatornode, periodicwave "pulse" multiple oscillators oscillatornode "noise" random noise buffer, biquad filter audiobuffer, audiobuffersourcenode, biquadfilternode "dial up" loading a sound sample to play audiocontext.decodeaudiodata(), audiobuffersourcenode note: this instrument was not created to sound good, it was created to provide demonstration code and represents a very simplified version of such an instrument.
...= math.random() * 2 - 1; } // create a buffer source for our created data let noise = audioctx.createbuffersource(); noise.buffer = buffer; let bandpass = audioctx.createbiquadfilter(); bandpass.type = 'bandpass'; bandpass.frequency.value = bandhz; // connect our graph noise.connect(bandpass).connect(audioctx.destination); noise.start(); } "dial up" — loading a sound sample it's straightforward enough to emulate phone dial (dtmf) sounds, by playing a couple of oscillators together using the methods we've already looked at, however, in this section, we'll load in a sample file instead so we can take a look at what's involved.
...And 3 more matches
Cross-browser audio basics - Developer guides
window.onload = function(){ var myaudio = document.getelementbyid('my-audio'); var play = document.getelementbyid('play'); var pause = document.getelementbyid('pause'); // associate functions with the 'onclick' events play.onclick = playaudio; pause.onclick = pauseaudio; function playaudio() { myaudio.play(); } function pauseaudio() { myaudio.pause(); } } media loading events above we have shown how you can create a very simple audio player, but what if we want to show progress, buffering and only activate the buttons when the media is ready to play?
... first, let's take a look at the media loading process in order: loadstart the loadstart event tells us simply that load process has started and the browser is connecting to the media.
... myaudio.addeventlistener("progress", function() { // you could let the user know the media is downloading }); canplay canplay is a useful event to detect should you want to determine whether the media is ready to play.
...And 3 more matches
Link prefetching FAQ - HTTP
a web page provides a set of prefetching hints to the browser, and after the browser is finished loading the page, it begins silently prefetching specified documents and stores them in its cache.
...if a subframe contains prefetching hints, prefetching will not begin until the top-most frame and all its "child" frames finish loading.
... what if i'm downloading something in the background?
...And 3 more matches
Tabbed browser - Archive of obsolete content
mostrecentwindow("navigator:browser"); mainwindow.gbrowser.addtab(...); opening a url in a new tab // add tab gbrowser.addtab("http://www.google.com/"); // add tab, then make active gbrowser.selectedtab = gbrowser.addtab("http://www.google.com/"); manipulating content of a new tab if you want to work on the content of the newly opened tab, you'll need to wait until the content has finished loading.
... // wrong way (the page hasn't finished loading yet) var newtabbrowser = gbrowser.getbrowserfortab(gbrowser.addtab("http://www.google.com/")); alert(newtabbrowser.contentdocument.body.innerhtml); // better way var newtabbrowser = gbrowser.getbrowserfortab(gbrowser.addtab("http://www.google.com/")); newtabbrowser.addeventlistener("load", function () { newtabbrowser.contentdocument.body.innerhtml = "<div>hello world</div>"; }, true); (the event target in the onload handler will be a 'tab' xul element).
... var browser = atab.linkedbrowser; //this is the browser within the tab //this is what the example in the previous section gives //end getting other useful stuff } else { components.utils.reporterror('exception: load context not found!!'); //this is likely no big deal as the channel proably has no associated window, ie: the channel was loading some resource.
...And 2 more matches
Migrate apps from Internet Explorer to Mozilla - Archive of obsolete content
<div id="foo">loading...</div> <script> document.getelementbyid("foo").innerhtml = "done."; </script> however, this is not guaranteed.
... to be sure that all elements exist, you should use the onload event handler on the <body> tag: <body onload="dofinish();"> <div id="foo">loading...</div> <script> function dofinish() { var element = document.getelementbyid("foo"); element.innerhtml = "done."; } </script> ...
...one concrete example is window.open, which opens a new window: <script> function doopenwindow(){ var mywindow = window.open("about:blank"); mywindow.location.href = "http://www.ibm.com"; } </script> the problem with the code is that window.open is asynchronous -- it does not block the javascript execution until the window has finished loading.
...And 2 more matches
Debugging on Windows
if vc++ and your mozilla application hang shortly after you launch the application under the debugger, see problems loading debug symbols.
... debugging tinderbox builds see running windows debug builds problems loading debug symbols if both your application and visual c++ hang shortly after launching the application under the debugger, you may be hitting a known deadlock in the way visual studio downloads debug symbols for the system libraries; see https://connect.microsoft.com/visualstudio/feedback/details/422970/hang-loading-rasapi32-pdb-when-using-symbol-server.
... there are two ways to work around this problem: turn off automatic symbol downloading for system libraries: in tools > options > debugging > symbols, uncheck the microsoft symbol server.
...And 2 more matches
nsIWebProgressListener
uriloader/base/nsiwebprogresslistener.idlscriptable this interface is implemented by clients wishing to listen in on the progress associated with the loading of asynchronous requests in the context of a nsiwebprogress instance as well as any child nsiwebprogress instances.
... a document request does not complete until all requests associated with the loading of its corresponding document have completed.
...for instance, a load that starts in a window might send progress and status messages for the new site, but it will not send the onlocationchange until we are sure that we are loading this new page here.
...And 2 more matches
XUL Overlays
MozillaTechXULOverlays
loading overlays overlays can be loaded explicitly or dynamically.
...since one of the main purposes of overlays is to provide ui for additions or components to the basic package, explicit loading can be somewhat problematic when the overlay defines optional ui elements.
... loading overlays explicitly a processing instruction is used to load overlay files explicitly into the master document.
...And 2 more matches
URLs - Plugins
« previousnext » this chapter describes retrieving urls and displaying them on specified target pages, posting data to an http server, uploading files to an ftp server, and sending mail.
...if a request completes successfully, and the target is non-null, the browser calls npp_urlnotify after it has finished loading the url.
... err = npn_geturl( instance, "http://www.example.com/", "_blank"); posting urls posting data to an http server uploading files to an ftp server sending mail the plug-in calls npn_posturl to post data from a file or buffer to a url.
...And 2 more matches
Using images - Web APIs
to do this, you can use the convenient image() constructor: var img = new image(); // create new img element img.src = 'myimage.png'; // set source path when this script gets executed, the image starts loading.
... if you try to call drawimage() before the image has finished loading, it won't do anything (or, in older browsers, may even throw an exception).
...it's beyond the scope of this tutorial to look at image pre-loading tactics, but you should keep that in mind.
...And 2 more matches
HTMLMediaElement.load() - Web APIs
the htmlmediaelement method load() resets the media element to its initial state and begins the process of selecting a media source and loading the media in preparation for playback to begin at the beginning.
... usage notes calling load() aborts all ongoing operations involving this media element, then begins the process of selecting and loading an appropriate media resource given the options specified in the <audio> or <video> element and its src attribute or child <source> element(s).
... the process of aborting any ongoing activities will cause any outstanding promises returned by play() being resolved or rejected as appropriate based on their status before the loading of new media can begin.
...And 2 more matches
Taking still photos with WebRTC - Web APIs
video this will be a reference to the <video> element after the page is done loading.
... canvas this will be a reference to the <canvas> element after the page is done loading.
... photo this will be a reference to the <img> element after the page is done loading.
...And 2 more matches
Media events - Developer guides
loadeddata the first frame of the media has finished loading.
... loadedmetadata the media's metadata has finished loading; all attributes now contain as much useful information as they're going to.
... loadstart sent when loading of the media begins.
...And 2 more matches
<img>: The Image Embed element - HTML: Hypertext Markup Language
WebHTMLElementimg
image loading errors if an error occurs while loading or rendering an image, and an onerror event handler has been set on the error event, that event handler will get called.
... loading indicates how the browser should load the image: eager: loads the image immediately, regardless of whether or not the image is currently within the visible viewport (this is the default value).
... lazy: defers loading the image until it reaches a calculated distance from the viewport, as defined by the browser.
...And 2 more matches
<link>: The External Resource Link element - HTML: Hypertext Markup Language
WebHTMLElementlink
take this example: <link rel="preload" href="myfont.woff2" as="font" type="font/woff2" crossorigin="anonymous"> a rel value of preload indicates that the browser should preload this resource (see preloading content with rel="preload" for more details), with the as attribute indicating the specific class of content being fetched.
...if you encounter problems with the favicon not loading, verify that the content-security-policy header's img-src directive is not preventing access to it.
...el="apple-touch-icon-precomposed" sizes="114x114" href="favicon114.png"> <!-- first- and second-generation ipad: --> <link rel="apple-touch-icon-precomposed" sizes="72x72" href="favicon72.png"> <!-- non-retina iphone, ipod touch, and android 2.1+ devices: --> <link rel="apple-touch-icon-precomposed" href="favicon57.png"> <!-- basic favicon --> <link rel="icon" href="favicon32.png"> conditionally loading resources with media queries you can provide a media type or query inside a media attribute; this resource will then only be loaded if the media condition is true.
...And 2 more matches
<video>: The Video Embed element - HTML: Hypertext Markup Language
WebHTMLElementvideo
autoplay a boolean attribute; if specified, the video automatically begins to play back as soon as it can do so without stopping to finish loading the data.
... poster a url for an image to be shown while the video is downloading.
...if autoplay is specified, the browser would obviously need to start downloading the video for playback.
...And 2 more matches
Performance fundamentals - Web Performance
javascript is a dynamically-typed language, and the web platform allows loading code, html, css, images, and other resources dynamically.
... these features can be used to defer work that's off the critical path by loading unnecessary content "lazily" some time after startup.
...to avoid this problem, applications should issue requests as early as possible in startup (this is called "front-loading").
...And 2 more matches
Structural overview of progressive web apps - Progressive web apps (PWAs)
server-side rendering (ssr) means a website is rendered on the server, so it offers quicker first load, but navigating between pages requires downloading new html content.
... it works great across browsers, but it suffers in terms of time navigating between pages and therefore general perceived performance — loading a page requires a new round trip to the server.
... the app shell concept the app shell concept is concerned with loading a minimal user interface and content as soon as possible, caching it so it's available offline for subsequent visits before then loading the remainder of the app's contents.
...And 2 more matches
Listening to events in Firefox extensions - Archive of obsolete content
load dispatched after the page—including images—has first finished loading.
... if the page contains scripts or other behaviors that fire during loading that you want to continue to execute every time the user navigates to the page, or if you want to know when a user has navigated to a cached page, use the new pageshow event.
... web progress listeners for more information about web loads a web progress listener can be used; these provide more details about the progress of loading data from the web.
...it is used to update the ui for many different reasons: update the progress bar and status messages as pages load turn on and off the throbber as pages load set the site icon when available update the address bar as the user navigates hide notification bars when appropriate as the user navigates apply the site zoom preferences to newly loading pages update the bookmarking star button ui update the identity display as the site's security changes tabsprogresslistener this object is a tabs progress listener and receives events for all browsers in the window.
Performance best practices in extensions - Archive of obsolete content
this makes it easy to load chunks of your extension on the fly as needed, instead of loading everything all at once.
...loading modules incurs a small cost, so breaking code up to an unnecessary degree can be counter-productive.
... code should be modularized to the extent that doing so increases clarity, and loading of large or expensive chunks of code fragments can be significantly deferred.
... lazily load services the xpcomutils javascript module provides two methods for lazily loading things: definelazygetter() defines a function on a specified object that acts as a getter which will be created the first time it's used.
Monitoring downloads - Archive of obsolete content
that code looks like this: ondownloadstatechange: function(astate, adownload) { var statement; switch(adownload.state) { case components.interfaces.nsidownloadmanager.download_downloading: // add a new row for the download being started; each row includes the // source uri, size, and start time.
...if the download's state, indicated by the adownload.state field, is components.interfaces.nsidownloadmanager.download_downloading, the file has begun to download.
...nt.createelement('listcell'); cell.setattribute("label", speed.tofixed(1) + "kb/sec"); cell.setattribute("style", "text-align:right"); row.appendchild(cell); var status = statement.getint32(5); var style = "color:black"; cell = document.createelement('listcell'); var statusstr; switch(status) { case 0: statusstr = "downloading"; break; case 1: statusstr = "complete"; style = "color:green"; break; case 2: statusstr = "failed"; style = "color:red"; break; case 3: statusstr = "canceled"; style = "color:purple"; break; case 4: statusstr = "paused"; style = "...
... add buttons to delete items from the log, or to delete all items that have finished downloading.
Plugin Architecture - Archive of obsolete content
classes there are some classes involved in plugins: nsobjectloadingcontent embed, object and applet nodes inherit from that class, which provides services for loading various kinds of objects.
... it takes care of most of the work involved in loading the data and instantiating plugins.
... note that while nsobjectloadingcontent also deals with images and documents, this document concentrates on plugins.
...if a frame comes into existance independent of that, it tells the content node that it exists now (nsiobjectloadingcontent::hasnewframe).
Using gdb on wimpy computers - Archive of obsolete content
the solution to this is to delay loading shared libraries until they are actually needed.
... however, you need to make sure that the base libraries like libc and pthreads are loaded before you tell gdb to stop loading shared libraries.
...the best way to do this is to set a breakpoint in main, let the program run until main and then turn off automatic library loading.
...if you have turned off automatic shared library loading, you will have to load them when you need them.
Venkman Introduction - Archive of obsolete content
the scripts that have been loaded by the javascript engine appear in the loaded scripts window (for more information about how scripts are loaded and accessed in venkman, see "loading scripts into the debugger").
... loading scripts into the debugger whether or not you start venkman first or the browser component, when the mozilla suite starts up, the javascript engine begins to keep track of and compile all the scripts that are loaded in web pages and in the various mozilla user interfaces themselves.
...see loading scripts into the debugger for more information about finding and loading scripts in venkman.
... the best way to get to know venkman, of course, is to play around with it — to set it up in the way that makes the most sense to you, to try loading scripts and setting breakpoints, evaluating expressions in the interactive session view, watching the values of variables as they change when scripts are executed, getting profile data.
Index - Archive of obsolete content
ArchiveMozillaXULIndex
424 fileguide see io 425 accessing files file and stream guide: [ nsiscriptableio | accessing files | getting file information | reading from files | writing to files | moving, copying and deleting files | uploading and downloading files | working with directories ] 426 getting file information file and stream guide: [ nsiscriptableio | accessing files | getting file information | reading from files | writing to files | moving, copying and deleting files | uploading and downloading files | working with directories ] 427 io file and stream guide: [ nsiscriptableio |...
... accessing files | getting file information | reading from files | writing to files | moving, copying and deleting files | uploading and downloading files | working with directories ] 428 moving, copying and deleting files file and stream guide: [ nsiscriptableio | accessing files | getting file information | reading from files | writing to files | moving, copying and deleting files | uploading and downloading files | working with directories ] 429 reading from files file and stream guide: [ nsiscriptableio | accessing files | getting file information | reading from files | writing to files | moving, copying and deleting files | uploading and downloading files | working with directories ] 430 toc file and stream guide: [ nsiscripta...
...bleio | accessing files | getting file information | reading from files | writing to files | moving, copying and deleting files | uploading and downloading files | working with directories ] 431 uploading and downloading files file and stream guide: [ nsiscriptableio | accessing files | getting file information | reading from files | writing to files | moving, copying and deleting files | uploading and downloading files | working with directories ] 432 working with directories file and stream guide: [ nsiscriptableio | accessing files | getting file information | reading from files | writing to files | moving, copying and deleting files | uploading and downloading files | working with directories ] 433 writing to files to write to ...
... 969 using the editor from xul xul the editor in xul lives on top of a xul <iframe> element; it observes document loading in this <iframe>, and, when document loading is complete, it instantiates an editor on the loaded document.
RDF in Mozilla FAQ - Archive of obsolete content
by loading chunks of it into a xul ui from a remote site), don't forget to let mozilla-rdf and the rdf interest group lists know.
...var remote = ds.queryinterface(components.interfaces.nsirdfremotedatasource); if (remote.loaded) { alert("the datasource was already loaded!"); } else { alert("the datasource wasn't loaded, but it's loading now!"); } say the datasource wasn't loaded, and is loading asynchronously.
...var remote = ds.queryinterface(components.interfaces.nsirdfremotedatasource); if (remote.loaded) { alert("the datasource was already loaded!"); } else { alert("the datasource wasn't loaded, but it's loading now!"); // rdf/xml datasources are all nsirdfxmlsinks var sink = ds.queryinterface(components.interfaces.nsirdfxmlsink); // attach the observer to the datasource-as-sink sink.addxmlsinkobserver(observer); // now observer's methods will be called-back as // the load progresses.
...if xul isn't loading your rdf, and the mimetype is ok, this could well be your problem.
What software do I need to build a website? - Learn web development
in this article we lay out which software components you need when you're editing, uploading, or viewing a website.
...e text linux vi (all unix) gedit (gnome) kate (kde) leafpad (xfce) emacs vim visual studio code brackets shiftedit sublime text chrome os shiftedit here is a screenshot of an advanced text editor: here is a screenshot of an online text editor: uploading files on the web when your website is ready for public viewing, you'll have to upload your webpages to your web server.
...bear in mind that (s)ftp is now somewhat old-fashioned, and other uploading systems are starting to become popular, such as rsync and git/github.
... uploading files to a web server is a very important step while creating a website, so we cover it in detail in a separate article.
Mozilla accessibility architecture
for example, nshtmltablecellframe::getaccessible() will eventually call nsiaccessibilityservice::createhtmltablecellaccessible(), which uses |new nshtmltablecellaccessible(domnode, weakpresshell); special exception: traversal overloading in some cases the necessary accessible children are not in the dom subtree for a node.
...however, we are careful not to do this work for mutation events fired because the document is still loading.
...if there is a newly loading document, it has its own separate window which has already been created and rendered into.
... in fact, for about a second two nsdocaccessible's exist for the same screen space - one for the old document about to be destroyed, and one for the loading document which hasn't been displayed yet.
Embedding API for Accessibility
a reframe fixes the appearance of the page to match the new prefs, without reloading the document over the network.
...ex color value */); setcharpref("browser.display.background_color", "#abcdef" /* hex color value */); setboolpref("browser.display.use_system_colors", boolsystemcolors); setboolpref("browser.display.use_document_colors", booluseauthorcolors); /* setting use_document_colors also stops background images from loading */ moz 0.8 link appearance setcharpref("browser.anchor_color", "#abcdef" /* hex color value */); setcharpref("browser.visited_color", "#abcdef" /* hex color value */); setboolpref("browser.underline_anchors", boolunderlinelinks); moz 0.8 focus...
... accepting special content on an instance basis after being notified of special content, the user needs to be able to select specific unloaded content for loading.
... one way of doing this is to build up the nsiwebbrowseraccessible interface, so that there is a method to force loading each type of content just for the current page in the current session.
Creating reftest-based unit tests
another part is testing invalidation - testing that when a document is changed after it has finished loading and displaying, that the browser correctly "invalidates" the parts of the screen that should change so that the screen displays the correct output the next time it is repainted.
... in order to test invalidation it is important that invalidation tests let the document completely finish loading and displaying before making the changes for which invalidation and repainting is to be tested.
... making the changes before the document has completely finished loading and painting would mean that the test may not actually test the browser's invalidation logic, since the changed parts of the document may end up displaying correctly purely due to a pending post-load paint.
...first you need to add class="reftest-wait" to the root element in the test to tell the reftest framework not to check the rendering as soon as the test finishes loading and moving on to the next test.
mozbrowsersecuritychange
trackingstate a domstring representing the current loading state of tracking content.
... blocked_tracking_content: indicates that the tracking content has been blocked from loading.
... mixedstate a domstring representing the current loading state of mixed active content.
... blocked_mixed_active_content: indicates that the mixed active content has been blocked from loading.
Browser API
htmliframeelement.reload() allows reloading of the <iframe> element content.
... htmliframeelement.stop() allows stopping of the <iframe>'s content loading.
... mozbrowserloadend sent when the browser <iframe> has finished loading all its assets.
...this can occur on resize and when the page size changes (while loading for example.) mozbrowserscrollviewchange sent when asynchronous scrolling (i.e.
InstallListener
void onnewinstall( in addoninstall install ) parameters install the addoninstall representing the install ondownloadstarted() called when downloading begins for an add-on install.
... void ondownloadprogress( in addoninstall install ) parameters install the addoninstall representing the install ondownloadended() called when downloading completes successfully for an add-on install.
... void ondownloadended( in addoninstall install ) parameters install the addoninstall representing the install ondownloadcancelled() called when downloading is cancelled.
... void ondownloadcancelled( in addoninstall install ) parameters install the addoninstall representing the install ondownloadfailed() called if there is some error downloading the add-on.
Index
a recent development adds support for loading external pem files that contain private keys, in a software library called nss-pem, which is separately available, but should eventually become a core part of nss.
...examples are retrieving ocsp (online certificate status protocol) information or downloading a crl (certificate revocation list).
...(this information can be edited by loading new specs using the -rawadd command.) modutil -rawlist -dbdir sql:/home/my/sharednssdb name="nss internal pkcs #11 module" parameters="configdir=.
... listing security modules the devices that can be used to store certificates -- both internal databases and external devices like smart cards -- are recognized and used by loading security modules.
Using the Places favicon service
this time is used by nsifaviconservice.setandloadfaviconforpage() to determine if the data is fresh or needs reloading from the server.
... if you are manually loading favicon data, you can specify the expiration time yourself.
...this makes sure that we aren't obsessively reloading favicons into the database for every page viewed, but also that changes in the favicon will be picked up quickly.
...if there is an error loading the favicon for an annotation uri, the default favicon data will be returned by the annotation service's protocol handler.
Finishing the Component
the interfaces needed to block certain urls from loading are not frozen, and there is still some debate about how exactly this functionality should be exposed to embedders and component developers, so the apis are not ready to be published.
... the method that handles the check before page loading and the only method we care about in our own implementation of nsicontentpolicy is shouldload().
...but it only should do this comparison for remote urls, because we don't want to block the application from loading local content that it requires, like files it gets via the resource:// protocol.
...if the scheme isn't "http", "https", or "ftp", it immediately returns true, which continues the loading process unblocked.
nsIApplicationUpdateService
it also provides utilities for selecting and downloading update patches.
...obsolete since gecko 1.9.1.7pre isdownloading boolean true if a download is in progress, otherwise false.
... downloadupdate() starts downloading a software update.
... return value a string indicating the status of the update upon return: "downloading" the update is being downloaded.
nsIMsgCloudFileProvider
uploaderr 0x8055311a returned when uploading has failed for an unknown reason.
... uploadwouldexceedquota 0x8055311b returned when uploading has failed because the user has exceeded their storage quota.
... uploadexceedsfilelimit 0x8055311c returned when uploading has failed because the file being uploaded is larger than the file size limit.
... uploadcanceled 0x8055311d returned when uploading has stopped because it was cancelled by the user.
Console messages - Firefox Developer Tools
the complete list of security messages is as follows: message details blocked loading mixed active content the page contained mixed active content: that is, the main page was served over https, but asked the browser to load "active content", such as scripts, over http.
... blocked loading mixed display content the page contained mixed display content: that is, the main page was served over https, but asked the browser to load "display content", such as images, over http.
... loading mixed (insecure) active content on a secure page the page contained mixed active content: that is, the main page was served over https, but asked the browser to load "active content", such as scripts, over http.
... loading mixed (insecure) display content on a secure page the page contained mixed display content: that is, the main page was served over https, but asked the browser to load "display content", such as images, over http.
Document: DOMContentLoaded event - Web APIs
the domcontentloaded event fires when the initial html document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading.
...if you want the dom to get parsed as fast as possible after the user has requested the page, you can make your javascript asynchronous and optimize loading of stylesheets.
...</script> checking whether loading is already complete domcontentloaded may fire before your script has a chance to run, so it is wise to check before adding a listener.
... function dosomething() { console.info('dom loaded'); } if (document.readystate === 'loading') { // loading hasn't finished yet document.addeventlistener('domcontentloaded', dosomething); } else { // `domcontentloaded` has already fired dosomething(); } live example html <div class="controls"> <button id="reload" type="button">reload</button> </div> <div class="event-log"> <label>event log:</label> <textarea readonly class="event-log-contents" rows="8" cols="30"></textarea> </div> css body { display: grid; grid-template-areas: "control log"; } .controls { grid-area: control; display: flex; align-items: center; justify-content: center; } .event-log { grid-area: log; } .event-log-contents { resize: none; } label, button { display: block; } #reload { ...
Document.fonts - Web APIs
WebAPIDocumentfonts
the fontfaceset interface is useful for loading new fonts, checking the status of previously loaded fonts etc.
... examples doing operation after all fonts are loaded document.fonts.ready.then(function() { // any operation that needs to be done only after all the fonts // have finished loading can go here.
... }); specifications specification status comment css font loading module level 3the definition of 'fontfaceset' in that specification.
... full support 60edge full support 79firefox full support 41 full support 41 no support 35 — 41disabled disabled from version 35 until version 41 (exclusive): this feature is behind the layout.css.font-loading-api.enabled preference (needs to be set to true).
NavigationPreloadManager - Web APIs
the navigationpreloadmanager interface of the the service worker api provides methods for managing the preloading of resources with a service worker.
... methods navigationpreloadmanager.enable() enables navigation preloading and returns a promise that resolves.
... navigationpreloadmanager.disable() disables navigation preloading and returns a promise that resolves.
... examples feature detecting and enabling navigation preloading addeventlistener('activate', event => { event.waituntil(async function() { if (self.registration.navigationpreload) { // enable navigation preloads!
Navigator.sendBeacon() - Web APIs
for example, which link the user clicked before navigating away and unloading the page.
... ensuring that data has been sent during the unloading of a document has traditionally been difficult, because user agents typically ignore asynchronous xmlhttprequests made in an unload handler.
... all of these methods block unloading the document, which slows down the next navigation.
...this solves all of the problems with submission of analytics data: the data is sent reliably it's sent asynchronously it doesn't impact the loading of the next page in addition, the code is simpler to write than any of the older techniques!
XMLHttpRequest.readyState - Web APIs
3 loading downloading; responsetext holds partial data.
... loading response's body is being received.
...instead of unsent, opened, headers_received, loading and done, the names readystate_uninitialized (0), readystate_loading (1), readystate_loaded (2), readystate_interactive (3) and readystate_complete (4) are used.
... example var xhr = new xmlhttprequest(); console.log('unsent', xhr.readystate); // readystate will be 0 xhr.open('get', '/api', true); console.log('opened', xhr.readystate); // readystate will be 1 xhr.onprogress = function () { console.log('loading', xhr.readystate); // readystate will be 3 }; xhr.onload = function () { console.log('done', xhr.readystate); // readystate will be 4 }; xhr.send(null); specifications specification status comment xmlhttprequest living standard whatwg living standard ...
ARIA: feed role - Accessibility
a feed enables screen readers to use the browse mode reading cursor to both read and scroll through a stream of rich content that may continue scrolling infinitely by loading more content as the user reads.
...these streams can be limited or infinite, loading more content as the user scrolls.
... implementing the feed pattern allows a screen reader to reliably read and trigger the loading of feed content while in reading mode.
... loading or removing feed articles based on which article contains dom focus.
Overview of events and handlers - Developer guides
event triggers include the completion of the loading of a resource on the network e.g., downloads an image that can now be drawn on the screen, the completion of parsing a resource by the browser e.g., processes the html content of a page, the interaction of a user with the contents of the page e.g., clicks a button.
... in general, we can distinguish events of different kinds based on the object emitting the event including: the window object, such as due to resizing the browser, the window.screen object, such as due to changes in device orientation, the document object, including the loading, modification, user interaction, and unloading of the page, the objects in the dom (document object model) tree including user interactions or modifications, the xmlhttprequest objects used for network requests, and the media objects such as audio and video, when the media stream players change state.
...this will also need finding a good explanation of the events involved during page loading, such as discussed partially in this web page or in this stack overflow question.
...nished rendering, meaning that all resources have been downloaded and acted upon, so that the scripts have been run and the images displayed, the global object window emits an event called 'resize' when the height or the width of the browser window is changed by a user, the dom object document representing the html document emits an event called 'domcontentloaded' when the document has finished loading, the dom node objects such as div or button emit an event called 'click' when the user presses the mouse button while the mouse pointer is on top of the dom node in the html page.
<audio>: The Embed Audio element - HTML: Hypertext Markup Language
WebHTMLElementaudio
autoplay a boolean attribute: if specified, the audio will automatically begin playback as soon as it can do so, without waiting for the entire audio file to finish downloading.
...if autoplay is specified, the browser would obviously need to start downloading the audio for playback.
... loadeddata the first frame of the media has finished loading.
... suspend media data loading has been suspended.
Content-Security-Policy - HTTP
frame-src specifies valid sources for nested browsing contexts loading using elements such as <frame> and <iframe>.
... media-src specifies valid sources for loading media using the <audio> , <video> and <track> elements.
... other directives block-all-mixed-content prevents loading any assets using http when the page is loaded using https.
... content-security-policy: default-src 'self' http://example.com; connect-src 'none'; content-security-policy: connect-src http://example.com/; script-src http://example.com/ examples example: disable unsafe inline/eval, only allow loading of resources (images, fonts, scripts, etc.) over https: // header content-security-policy: default-src https: // meta tag <meta http-equiv="content-security-policy" content="default-src https:"> example: pre-existing site that uses too much inline code to fix but wants to ensure resources are loaded only over https and to disable plugins: content-security-policy: default-src https: 'unsafe-e...
Index - HTTP
WebHTTPHeadersIndex
30 csp: block-all-mixed-content csp, directive, http, mixed content, reference, security the http content-security-policy (csp) block-all-mixed-content directive prevents loading any assets using http when the page is loaded using https.
... 37 csp: frame-src csp, directive, http, reference, security the http content-security-policy (csp) frame-src directive specifies valid sources for nested browsing contexts loading using elements such as <frame> and <iframe>.
... 40 csp: media-src csp, directive, http, reference, security the http content-security-policy (csp) media-src directive specifies valid sources for loading media using the <audio> and <video> elements.
... 122 x-xss-protection http, reference, security, xss, header the http x-xss-protection response header is a feature of internet explorer, chrome and safari that stops pages from loading when they detect reflected cross-site scripting (xss) attacks.
Populating the page: how browsers work - Web Performance
navigation navigation is the first step in loading a web page.
... <link rel="stylesheet" src="styles.css"/> <script src="myscript.js" async></script> <img src="myimage.jpg" alt="image description"/> <script src="anotherscript.js" async></script> in this example, while the main thread is parsing the html and css, the preload scanner will find the scripts and image, and start downloading them as well.
... waiting to obtain css doesn't block html parsing or downloading, but it does block javascript, because javascript is often used to query css properties’ impact on elements.
... other processes javascript compilation while the css is being parsed and the cssom created, other assets, including javascript files, are downloading (thanks to the preload scanner).
Recommended Web Performance Timings: How long is too long? - Web Performance
there are no clear set rules as to what constitutes a slow pace when loading pages, but there are specific guidelines for indicating content will load (1 second), idling (50ms), animating (16.7s) and responding to user input (50 to 200ms).
... yes, one second for loading is a goal, but it's something few sites achieve.
...a 'hello world' on the corporate network would be expected to load in milliseconds, but a user downloading a cat video on a five-year-old device over an edge network in northern siberia would likely find a 20-second download speedy.
...there are different suggested times for initially loading the page versus loading additional assets, responding to user interaction, and ensuring smooth animations: idling goal browsers are single threaded (though background threads are supported for web workers).
Progressive web app structure - Progressive web apps (PWAs)
server-side rendering (ssr) means a website is rendered on the server, so it offers quicker first load, but navigating between pages requires downloading new html content.
... it works great across browsers, but it suffers in terms of time navigating between pages and therefore general perceived performance — loading a page requires a new round trip to the server.
... app shell the app shell concept is concerned with loading a minimal user interface as soon as possible and then caching it so it is available offline for subsequent visits before then loading all the contents of the app.
... this structure is fast, and also feels fast as the user sees "something" instantly, instead of a loading spinner or a blank page.
Progressive web apps (PWAs)
progressive loadingin previous articles we covered apis that help us make our js13kpwa example a progressive web app: service workers, web manifests, notifications and push.
... in this article we will go even further and improve the performance of the app by progressively loading its resources.progressive web app structurenow that we know the theory behind pwas, let's look at the recommended structure of an actual app.
... introduction to progressive web apps progressive web app structure making pwas work offline with service workers how to make pwas installable how to make pwas re-engageable using notifications and push progressive loading technology guides client-side storage — a lengthy guide showing how and when to use web storage, indexeddb, and service workers.
... instant loading web apps with an application shell architecture — a guide to using the app shell coding pattern to create apps that load quickly.
panel - Archive of obsolete content
: icons for the button in three different sizes "main.js" is saved in your add-on's lib directory, and the other files go in your add-on's data directory: my-addon/ data/ get-text.js icon-16.png icon-32.png icon-64.png text-entry.html lib/ main.js the "main.js" looks like this: var data = require("sdk/self").data; // construct a panel, loading its content from the "text-entry.html" // file in the "data" directory, and loading the "get-text.js" script // into it.
... the main add-on code is exactly the same as the main add-on code in the previous example, except that we don't attach a content script: var data = require("sdk/self").data; // construct a panel, loading its content from the "text-entry.html" // file in the "data" directory, and loading the "get-text.js" script // into it.
... methods destroy() destroys the panel, unloading any content that was loaded in it.
/loader - Archive of obsolete content
provide an environment for loading commonjs style modules, which makes it possible to consume lots of interesting code that has already been developed.
... loading modules the commonjs specification defines the notion of a main module, which represents an entry point to a program.
...}) require() as already mentioned in loading modules it's common to start execution by loading a main module.
remote/parent - Archive of obsolete content
each frame loads in a process but sometimes the application may choose to switch from loading a tab in one process to another.
... loading modules into the child process to load a module into the child process, use remoterequire(): const { remoterequire } = require("sdk/remote/parent"); remoterequire("./my-module.js", module); inter-process communication a module loaded into a different process cannot directly communicate or share state with the module that loaded it.
...to resolve relative to the loading module, pass module here.
jpm - Archive of obsolete content
see overloading the built-in modules for more information.
... see overloading the built-in modules for more information.
... overloading the built-in modules the sdk modules you use to implement your add-on are built into firefox.
Common Pitfalls - Archive of obsolete content
the first couple of items deal with loading content from a uri.
...this will shield you from loading <tt>javascript:</tt> or <tt>chrome:</tt> uris when you shouldn't.
... how to do security checks for uri loads before loading a uri, one of two security checks needs to be performed: if the uri is a string that will be loaded via passing the string to nsiwebnavigation::loaduri, the one must call checkloaduristrwithprincipal and pass the principal that the uri originates from as the first argument and the uri string as the second argument.
Intercepting Page Loads - Archive of obsolete content
« previousnext » there are several ways to detect and intercept loading of web pages and their content, be it only to realize when it happens, modify their contents, or to block them and do something else instead.
...you can close the tab, redirect the tab to about:blank or another page, or tell the browser to stop loading this page, but in general you don't want to do this because it will be visible to the user and it will look like a bug.
...the context parameter gives you access to the window loading the content.
Using Dependent Libraries In Extension Components - Archive of obsolete content
the firefox extension system does not provide automatic support for loading these dependent libraries, but it is possible to load these libraries explicitly using a component stub.
...2008 */ //include the stuff from mozilla glue that we need #include "nsilocalfile.h" #include "nsstringapi.h" #include "nscomptr.h" //include things from the mach-o libraries that we need for loading the libraries.
... if you update your dependencies in your component, // but forget to remove a dependant library in the stubloader, then we don't want to // fail loading the component since the dependant library isn't required.
Creating a dynamic status bar extension - Archive of obsolete content
javascript code that will do the real work: <?xml version="1.0" encoding="utf-8"?> <!doctype overlay> <overlay id="stockwatcher-overlay" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script type="application/javascript" src="chrome://stockwatcher/content/stockwatcher.js"/> <!-- firefox --> <statusbar id="status-bar"> <statusbarpanel id="stockwatcher" label="loading..." tooltiptext="current value" onclick="stockwatcher.refreshinformation()" /> </statusbar> </overlay> also, notice that the definition of the status bar panel now includes a new property, onclick, which references the javascript function that will be executed whenever the user clicks on the status bar panel.
...we end up reloading data from each of the windows once in 10 minutes - fixing this by creating a js component responsible for communication with the server is a good idea for one of the future articles startup: function() { this.refreshinformation(); window.setinterval(this.refreshinformation, 10*60*1000); }, this starts by calling our refreshinformation() function, which is responsible for fetching and display...
...we do this so that upon loading, the stock information is displayed as soon as possible.
Menu - Archive of obsolete content
ArchiveMozillaJetpackUIMenu
(assume we've defined a getrecenttweets(), which invokes a callback with an array of strings.) when the menu is shown, it displays a "loading..." item.
... if the menu remains open when getrecenttweets() receives data from the network and calls done(), the "loading..." item is replaced with the tweets, one item per tweet: this example will not work on os x due to a platform bug in firefox.
...jetpack.menu.add({ label: "recent tweets", menu: new jetpack.menu({ beforeshow: function (menu) { menu.set("loading..."); getrecenttweets(function done(tweets) menu.set(tweets)); } }) }); when the user selects some text on a page, the context menu normally displays a simple item that searches for it.
IO - Archive of obsolete content
ArchiveMozillaXULFileGuideIO
file and stream guide: [ nsiscriptableio | accessing files | getting file information | reading from files | writing to files | moving, copying and deleting files | uploading and downloading files | working with directories ] important note: the pages from the file and stream guide use the io object (nsiscriptableio), which was not available in any released version of the platform (pending some fixes).
...upload and download files upload files to learn how to upload and post files to a web site, see uploading and downloading files.
... download files to learn how to download and save a file from a web site to disk, see downloading files.
Template Logging - Archive of obsolete content
for example: if (root.builder.datasource instanceof xmldocument) alert("xml datasource loaded ok"); be careful, as the datasource will only be set once the document has finished loading and has been parsed, so don't check this property too early.
... you may also get an error if you manipulate or analyze the template while the datasource is loading.
...future versions may include other features to make it easier to debug problems with data loading.
Using the Editor from XUL - Archive of obsolete content
overview the editor in xul lives on top of a xul <iframe> element; it observes document loading in this <iframe>, and, when document loading is complete, it instantiates an editor on the loaded document.
...that causes the editoronload() javascript function to get executed when the xul is done loading.
...we get the url to load from the args element, then kick off the load: var url = document.getelementbyid("args").getattribute("value"); editorshell.loadurl(url); loading the document in the <iframe> of course happens asynchronously, so we need to know when we have a document that we can start editing.
XUL Questions and Answers - Archive of obsolete content
loading remote dtds for xml documents is currenty not supported in xul.
... support for non-rdf datasources for xul template is planned (bug 321170): xml datasources (bug 321171) storage (sqlite) datasources (bug 321172) when loading an xslt stylesheet into an xml i get the error: "error loading stylesheet: an xslt stylesheet load was blocked for security reasons." that error is from a security check that has been put up to safeguard against cross-site-scripting attacks.
... // do whatever you want to do return 0; } // for definitions of the remaining functions see xulplanet.com listobj.onprogresschange = function() { return 0 }; listobj.onstatuschange = function() { return 0 }; listobj.onsecuritychange = function() { return 0 }; listobj.onlinkiconavailable = function() { return 0 }; /* i use the progress listener to trap the end of a local html "template" file loading, and run xslt transormations.
browser - Archive of obsolete content
chrome (default behaviour): a browser, intended to be used for loading privileged content using a chrome:// uri.
... webprogress type: nsiwebprogress this read-only property contains an nsiwebprogress object which is used to monitor the progress of a document loading.
... stop() return type: no return value equivalent to pressing the stop button, this method stops the currently loading document.
Index - MDN Web Docs Glossary: Definitions of Web-related terms
148 first contentful paint glossary, performance, reference, web performance first contentful paint (fcp) is when the browser renders the first bit of content from the dom, providing the first feedback to the user that the page is actually loading.
... 249 lazy load glossary, lazy loading, reference, web performance lazy loading is a strategy that delays the loading of some assets (e.g., images) until they are needed by the user based on the user's activity and navigation pattern; typically, these assets are only loaded when they are scrolled into view.
...page prediction improves performance by enabling almost instant loading of predicted content.
Lazy load - MDN Web Docs Glossary: Definitions of Web-related terms
lazy loading is a strategy that delays the loading of some assets (e.g., images) until they are needed by the user based on the user's activity and navigation pattern; typically, these assets are only loaded when they are scrolled into view.
... if correctly implemented, this delay in asset loading is seamless to the user experience and might help improve initial load performance, including time to interactive, as fewer assets are required for the page to start working.
... see also lazy loading ...
Perceived performance - MDN Web Docs Glossary: Definitions of Web-related terms
perceived performance is not measured by when your site is done loading but when it has loaded enough for users to believe it has loaded and is interactive.
...other features, such as good ux design, including animations, and lazy loading, can make your site appear more responsive, even if the download and response times remain the same.
... actual performance is a measurement from when a request is made, through the downloading, parsing and execution of all resources, and the final paint.
Legacy layout methods - Learn web development
try saving and loading the page in your browser to see the effects.
... try loading and refreshing to see the difference, or check out our fluid-grid-offset.html example (see it running live also).
...umn">2</div> <div class="one column">3</div> /* and so on */ </div> </div> next, give the containers on the second row classes explaining the number of columns they should span, like so: <div class="row"> <div class="one column">13</div> <div class="six columns">14</div> <div class="three columns">15</div> <div class="two columns">16</div> </div> try saving your html file and loading it in your browser to see the effect.
How do you make sure your website works properly? - Learn web development
let's look at the http statuses again: 200 for / and for unicorn_pic.png means that we succeeded in reloading the page and the image.
... 404 errors many times the error just results just from a typo, but sometimes maybe you either forgot to upload a resource or you lost your network connection while you were uploading your resources.
...this will not prevent the page from loading but you will feel something went wrong.
Index - Learn web development
beginner, ftp, github, uploading, webmechanics, hosting, rsync, sftp if you have built a simple web page (see html basics for an example), you will probably want to put it online, on a web server.
...dictionaries and glossaries formally associate keywords with one or more descriptions, as in this case: 255 tips for authoring fast-loading html pages advanced, guide, html, needsupdate, performance, web, web performance these tips are based on common knowledge and experimentation.
...a loading spinner)?
Ember resources and troubleshooting - Learn web development
handle loading and error states from the minimally required data.
... last, a route has the ability to handle common events resulting from configuring the model: loading — what to do when the model hook is loading.
... both loading and error can render default templates as well as customized templates defined elsewhere in the application, unifying loading/error states.
Routing in Ember - Learn web development
it also tells ember how to interact with your route, such as when loading arbitrary data, handling errors while loading that data, or interpreting dynamic segments of the url.
... creating the "index" route did not add a route definition line to router.js, because like with url navigation and javascript module loading, "index" is a special word that indicates the default route to render, load, etc.
...model is a data loading lifecycle hook.
Package management basics - Learn web development
downloading them and putting them in the correct locations in your project.
..."hot module replacement", "live reloading", and "uncompressed and commented source code".
...it differs in that it uses a different method for downloading and storing the packages on your computer, aiming to reduce the overall disk space required.
HTTP Cache
external canceling of the loading channel) concurrent readers would not be able to reach the remaning unread content.
... keeps its internal state like notloaded, loading, empty, writing, ready, revalidating.
...chestorageservice hash tables up if not found: create a new one, add it to the proper hash table and set its state to notloaded consumer reference ++ call to cacheentry::asyncopen consumer reference -- cacheentry::asyncopen (entry atomic): the opener is added to fifo, consumer reference ++ (dropped back after an opener is removed from the fifo) state == notloaded: state = loading when open_truncate flag was used: cachefile is created as 'new', state = empty otherwise: cachefile is created and load on it started cacheentry::onfileready notification is now expected state == loading: just do nothing and exit call to cacheentry::invokecallbacks cacheentry::invokecallbacks (entry atomic): called on: a new opene...
AddonInstall
only available after downloading is complete.
...this is guaranteed to be correct after downloading is complete but may be set earlier.
...only available after downloading is complete.
AddonManager
state_downloading an install that is in the process of being downloaded.
... state_downloaded an install that has finished downloading and is ready to install.
... update_status_download_error there was an error while downloading the update information.
Examples
make user defined promise return after multiple images finish loading (promise.all and promise.defer) this example shows how to use promise.all to wait to create multiple promises with promise.defer() and return at the end of it.
...promise.resolve('succesfully loaded image at path = "' + path + '" the width of this image is = "' + this.naturalwidth + '".'); if (!this.naturalwidth) { loadthisimagepromise.reject('image loaded but it has 0 width at path = "' + path + '" the naturalwidth was 0'); } } myimage.onerror = function(e) { loadthisimagepromise.reject('an error occured while loading path = "' + path + '".
... the error = ' + uneval(e)); } myimage.onabort = function(e) { loadthisimagepromise.reject('image load was aborted loading path = "' + path + '".'); } myimage.src = path; }); return promise.all(mysubpromises); } catch(ex) { return promise.reject(ex); } } to test and see what happens when you get an error.
Using JSS
MozillaProjectsNSSJSSUsing JSS
if you are downloading binaries, get them from the binary release locations in the above table.
...if you are downloading binaries, get it from http://ftp.mozilla.org/pub/mozilla.org/security/jss/releases/.
... if you are downloading binaries, get jss42.jar from http://ftp.mozilla.org/pub/mozilla.org/security/jss/releases/.
Bundling multiple binary components
possible solutions this article covers two possible ways to make binary components support multiple version of gecko: dynamic method loading stub loader dynamic method loading the idea with this approach is to figure out all the methods imported from gecko and dynamically load the methods.
... this approach uses only one binary for each platform (win/mac/linux) but creates complexity in the binaries - loading the methods and creating the wrappers.
...on the other hand, this approach is much more simple than the dynamic loading approach.
Index
MozillaTechXPCOMIndex
745 nsimessenger interfaces, interfaces:scriptable, messages, needscontent, xpcom api reference, xpcom interface reference, thunderbird the nsimessenger interface provides functions for managing the history, undo and redo operations, and for loading, saving, or deleting messages and attachments in mailnews.
... 881 nsiscriptableio interfaces, interfaces:scriptable, xpcom, xpcom api reference, xpcom interface reference file and stream guide: [ nsiscriptableio | accessing files | getting file information | reading from files | writing to files | moving, copying and deleting files | uploading and downloading files | working with directories ] 882 nsiscriptableinputstream interfaces, interfaces:scriptable, xpcom, xpcom api reference, xpcom interface reference return the number of bytes currently available in the stream.
... 1071 nsiwebprogress interfaces, interfaces:scriptable, xpcom, xpcom api reference, xpcom interface reference the nsiwebprogress interface is used to add or remove nsiwebprogresslistener instances to observe the loading of asynchronous requests (usually in the context of a dom window).
imgILoader
pports last changed in gecko 8.0 (firefox 8.0 / thunderbird 8.0 / seamonkey 2.5) implemented by @mozilla.org/image/loader;1 as a service: var imgiloader = components.classes["@mozilla.org/image/loader;1"] .getservice(components.interfaces.imgiloader); method overview imgirequest loadimage(in nsiuri auri, in nsiuri ainitialdocumenturl, in nsiuri areferreruri, in nsiprincipal aloadingprincipal, in nsiloadgroup aloadgroup, in imgidecoderobserver aobserver, in nsisupports acx, in nsloadflags aloadflags, in nsisupports cachekey, in imgirequest arequest, in nsichannelpolicy channelpolicy); imgirequest loadimagewithchannel(in nsichannel achannel, in imgidecoderobserver aobserver, in nsisupports cx, out nsistreamlistener alistener); boolean supportimagewithmimetype(in string mim...
...imgirequest loadimage( in nsiuri auri, in nsiuri ainitialdocumenturl, in nsiuri areferreruri, in nsiprincipal aloadingprincipal, in nsiloadgroup aloadgroup, in imgidecoderobserver aobserver, in nsisupports acx, in nsloadflags aloadflags, in nsisupports cachekey, in imgirequest arequest, in nsichannelpolicy channelpolicy ); parameters auri the uri to load.
...aloadingprincipal the principal of the loading document.
nsIFaviconService
this method is same as setfaviconurlforpage() except that this also attempts to set the data by loading the favicon uri.
...this will be used if you call setandloadfaviconforpage() to see whether the data needs reloading.
...this will be used if you call setandloadfaviconforpage() to see whether the data needs reloading.
nsIProtocolHandler
uri_non_persistable 1<<10 loading channels from this protocol has side-effects that make it unsuitable for saving to a local file.
... newuri() makes a uri object that is suitable for loading by this protocol, where the uri string is given as an utf-8 string.
... return value the new uri object suitable for loading using the protocol.
nsISHistory
requestedindex long the index of the last document that started to load that is not yet finished loading.
... when the document finishes loading the value -1 is returned.
...for example to control memory usage of the browser, to prevent users from loading documents from history, to erase evidence of prior page loads and so on.
nsIWebBrowserPersist
do not call this method until the document has finished loading!
...this may be a nsilocalfile object or an nsiuri object with a file scheme or a scheme that supports uploading (for example ftp).
...this may be a nsilocalfile object or an nsiuri object with a file scheme or a scheme that supports uploading (for example ftp).
Troubleshooting XPCOM components registration
registration failure if the module is loading correctly but doesn't register its components, try adding calls to components.utils.reporterror("debug me!"); in nsgetmodule() and other functions to try and find any errors.
...(the -r switch from gnu ldd lists function relocations; adjust as suitable for your version) trace shared library loading by setting the environment variable ld_debug=all while launching firefox (see `man ld.so` for details).
... use dyld environment variables to trace binary component loading: dyld_print_apis=1 dyld_print_libraries=1 (see `man dyld` for details).
Using the Mozilla symbol server
if you would like to get symbols from microsoft's symbol server as well, you should list that first (note: you can replace c:\symcache\ with any writable directory on your computer, if you'd prefer a different location for downloaded symbols): srv*c:\symcache\*https://msdl.microsoft.com/download/symbols;srv*c:\symcache\*https://symbols.mozilla.org/ downloading symbols using symchk.exe you can also download the symbols using symchk.exe, part of microsoft's debugging tools for windows.
... symchk: failed files = 4 symchk: passed + ignored files = 179 downloading symbols on linux / mac os x if you are on linux and running gdb 7.9 or newer, you can use this gdb python script to automatically fetch symbols.
... you will need to source this script before loading symbols (the part where it spends a few seconds loading each .so when you attach gdb).
Mozilla
the articles below include content about downloading and building mozilla code.
...all top level document loading (navigation) channels are set chooseapplicationcache flag, which happens in nsdocshell::douriload().
... mozilla style system the style system is the module of mozilla's code responsible for the loading and parsing of css style sheets, and the computation of computed values for all css properties.
about:debugging (before Firefox 68) - Firefox Developer Tools
loading a temporary add-on with the "load temporary add-on" button you can load any sort of restartless add-on temporarily, from a directory on disk.
... note that before firefox 48, loading the add-on again by pressing "load temporary add-on" without restarting firefox does not work.
...this does what it says: reloading any persistent scripts, such as background scripts parsing the manifest.json file again, so changes to permissions, content_scripts, browser_action or any other keys will take effect.
Beacon API - Web APIs
the beacon interface addresses the needs of analytics and diagnostics code that typically attempts to send data to a web server before unloading the document.
...however, ensuring that the data is sent during the unloading of a document is something that has traditionally been difficult for developers.
...the synchronous xmlhttprequest forces the browser to delay unloading the document, and makes the next navigation appear to be slower.
Document - Web APIs
WebAPIDocument
document.readystateread only returns loading status of the document.
... globaleventhandlers.onloadend is an eventhandler representing the code to be called when the loadend event is raised (when progress has stopped on the loading of a resource.) globaleventhandlers.onloadstart is an eventhandler representing the code to be called when the loadstart event is raised (when progress has begun on the loading of a resource.) globaleventhandlers.onlostpointercapture is an eventhandler representing the code to be called when the lostpointercapture event type is raised.
... load & unload events domcontentloaded fired when the document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading.
Using Fetch - Web APIs
fetch('https://example.com', { credentials: 'omit' }) uploading json data use fetch() to post json-encoded data.
... const data = { username: 'example' }; fetch('https://example.com/profile', { method: 'post', // or 'put' headers: { 'content-type': 'application/json', }, body: json.stringify(data), }) .then(response => response.json()) .then(data => { console.log('success:', data); }) .catch((error) => { console.error('error:', error); }); uploading a file files can be uploaded using an html <input type="file" /> input element, formdata() and fetch().
...w formdata(); const filefield = document.queryselector('input[type="file"]'); formdata.append('username', 'abc123'); formdata.append('avatar', filefield.files[0]); fetch('https://example.com/profile/avatar', { method: 'put', body: formdata }) .then(response => response.json()) .then(result => { console.log('success:', result); }) .catch(error => { console.error('error:', error); }); uploading multiple files files can be uploaded using an html <input type="file" multiple /> input element, formdata() and fetch().
FileReader.readyState - Web APIs
1 loading a read method has been called.
... loading a readas method was invoked.
... example var reader = new filereader(); console.log('empty', reader.readystate); // readystate will be 0 reader.readastext(blob); console.log('loading', reader.readystate); // readystate will be 1 reader.onloadend = function () { console.log('done', reader.readystate); // readystate will be 2 }; value a number which is one of the three possible state constants define for the filereader api.
FontFace.status - Web APIs
WebAPIFontFacestatus
the status read-only property of the fontface interface returns an enumerated value indicating the status of the font, one of "unloaded", "loading", "loaded", or "error".
... syntax var status = fontface.status; value one of "unloaded", "loading", "loaded", or "error".
... specifications specification status comment css font loading module level 3the definition of 'status' in that specification.
FontFace - Web APIs
WebAPIFontFace
fontface.loaded read only returns a promise that resolves with the current fontface object when the font specified in the object's constructor is done loading or rejects with a syntaxerror.
... fontface.status read only returns an enumerated value indicating the status of the font, one of "unloaded", "loading", "loaded", or "error".
... specifications specification status comment css font loading module level 3the definition of 'fontface' in that specification.
GlobalEventHandlers.onload - Web APIs
<title>onload test</title> // es5 <script> function load() { console.log("load event detected!"); } window.onload = load; </script> // es2015 <script> const load = () => { console.log("load event detected!"); } window.onload = load; </script> </head> <body> <p>the load event fires when the document has finished loading!</p> </body> </html> notes the load event fires at the end of the document loading process.
... at this point, all of the objects in the document are in the dom, and all the images, scripts, links and sub-frames have finished loading.
... there are also dom events like domcontentloaded and domframecontentloaded (which can be handled using eventtarget.addeventlistener()) which are fired after the dom for the page has been constructed, but do not wait for other resources to finish loading.
HTMLImageElement.complete - Web APIs
syntax let doneloading = htmlimageelement.complete; value a boolean value which is true if the image has completely loaded; otherwise, the value is false.
... the image is "broken;" that is, the image failed to load due to an error or because image loading is disabled.
... but imagine that you have other code that needs to only run when the image has completed loading, such as a command that performs red-eye removal on the image in the lightbox.
HTMLMediaElement.networkState - Web APIs
network_loading 2 the browser is downloading htmlmediaelement data.
... examples this example will listen for the audio element to begin playing and then check if it is still loading data.
... <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...
PerformanceTiming - Web APIs
the performancetiming interface is a legacy interface kept for backwards compatibility and contains properties that offer performance timing information for various events which occur during the loading and use of the current page.
... these properties each describe the time at which a particular point in the page loading process was reached.
... performancetiming.domloading read only when the parser started its work, that is when its document.readystate changes to 'loading' and the corresponding readystatechange event is thrown.
ProgressEvent - Web APIs
the progressevent interface represents events measuring progress of an underlying process, like an http request (for an xmlhttprequest, or the loading of the underlying resource of an <img>, <audio>, <video>, <style> or <link>).
...when downloading a resource using http, this only represent the part of the content itself, not headers and other overhead.
...when downloading a resource using http, this only represent the content itself, not headers and other overhead.
ServiceWorkerContainer.startMessages() - Web APIs
this can be used to react to sent messages earlier, even before that page's content has finished loading.
... explanation by default, all messages sent from a page's controlling service worker to the page (using client.postmessage()) are queued while the page is loading, and get dispatched once the page's html document has been loaded and parsed (i.e.
...it's possible to start dispatching these messages earlier by calling serviceworkercontainer.startmessages(), for example if you've invoked a message handler using eventtarget.addeventlistener() before the page has finished loading, but want to start processing the messages right away.
USBDevice - Web APIs
WebAPIUSBDevice
usbdevice.deviceclass read only one of three properties that identify usb devices for the purpose of loading a usb driver that will work with that device.
... usbdevice.deviceprotocol read only one of three properties that identify usb devices for the purpose of loading a usb driver that will work with that device.
... usbdevice.devicesubclass read only one of three properties that identify usb devices for the purpose of loading a usb driver that will work with that device.
Window - Web APIs
WebAPIWindow
window.stop() this method stops window loading.
... event handlers implemented from elsewhere globaleventhandlers.onabort called when the loading of a resource has been aborted, such as by a user canceling the load while it is still in progress windoweventhandlers.onafterprint called when the print dialog box is closed.
... domcontentloaded fired when the document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading.
Sending and Receiving Binary Data - Web APIs
see downloading binary streams with xmlhttprequest for a detailed explanation.
... see also downloading files.
... submitting forms and uploading files please, read this paragraph.
Implementing a Microsoft Active Accessibility (MSAA) Server - Accessibility
without downloading the sdk, you won't get the extremely useful tools, which help a great deal in the learning process.
... missing functionality in msaa problem and solutions: assistive technology vendors need some things which msaa does not provide, such as: no way of signifying that a document has finished loading.
...when the loading has finished, fire another event_object_statechange event and clear the state_busy flag.
Getting Started - Developer guides
the two major features of ajax allow you to do the following: make requests to the server without reloading the page receive and work with data from the server step 1 – how to make an http request in order to make an http request to the server with javascript, you need an instance of an object with the necessary functionality.
...} the full list of the readystate values is documented at xmlhttprequest.readystate and is as follows: 0 (uninitialized) or (request not initialized) 1 (loading) or (server connection established) 2 (loaded) or (request received) 3 (interactive) or (processing request) 4 (complete) or (request finished and response is ready) next, check the http response status codes of the http response.
... simple timed xhr example another simple example follows — here we are loading a text file via xhr, the structure of which is assumed to be like this: time: 312.05 time: 312.07 time: 312.10 time: 312.12 time: 312.14 time: 312.15 once the text file is loaded, we split() the items into an array at each newline character (\n — basically where each line break is in the text file), and then print the complete list of timestamps, and the last timestamp, onto the page.
Link types - HTML: Hypertext Markup Language
<link> <a>, <area>, <form> modulepreload initiates early (and high-priority) loading of module scripts.
... <link> <a>, <area>, <form> preconnect provides a hint to the browser suggesting that it open a connection to the linked web site in advance, without disclosing any private information or downloading any content, so that when the link is followed the linked content can be fetched more quickly.
...see preloading content with rel="preload" for more details.
Using the application cache - HTML: Hypertext Markup Language
loading documents the use of an application cache modifies the normal process of loading a document: if an application cache exists, the browser loads the document and its associated resources directly from the cache, without accessing the network.
... the process for loading documents and updating the application cache is specified in greater detail below: when the browser visits a document that includes the manifest attribute, if no application cache exists, the browser loads the document and then fetches all the entries listed in the manifest file, creating the first version of the application cache.
... downloading resources are being downloaded to be added to the cache, due to a changed resource manifest.
JavaScript modules - JavaScript
this can only be a good thing — browsers can optimize loading of modules, making it more efficient than having to use a library and do all of that extra client-side processing and extra round trips.
... there is no need to use the defer attribute (see <script> attributes) when loading a module script; modules are deferred automatically.
... so now in the main.js file, we can get access to all three module classes by replacing import { square } from './modules/square.js'; import { circle } from './modules/circle.js'; import { triangle } from './modules/triangle.js'; with the following single line: import { square, circle, triangle } from './modules/shapes.js'; dynamic module loading the newest part of the javascript modules functionality to be available in browsers is dynamic module loading.
WebAssembly Concepts - WebAssembly
additionally, the cost of downloading, parsing, and compiling very large javascript applications can be prohibitive.
... above we talked about the raw primitives that webassembly adds to the web platform: a binary format for code and apis for loading and running this binary code.
... the emscripten tool is able to take just about any c/c++ source code and compile it into a .wasm module, plus the necessary javascript "glue" code for loading and running the module, and an html document to display the results of the code.
Content Scripts - Archive of obsolete content
loading content scripts you can load a single script by assigning a string to either the contentscript or the contentscriptfile option.
...at this point, content scripts are able to interact with the dom content, but externally-referenced stylesheets and images may not have finished loading.
Working with Events - Archive of obsolete content
objects emit events on state changes that might be of interest to add-on code, such as browser windows opening, pages loading, network requests completing, and mouse clicks.
... so there are two main ways you will interact with the eventemitter framework: listening to built-in events emitted by objects in the sdk, such as tabs opening, pages loading, mouse clicks sending and receiving user-defined events between content scripts and add-on code this guide only covers the first of these; the second is explained in the working with content scripts guide.
frame/hidden-frame - Archive of obsolete content
remove unregisters a frame, unloading any content that was loaded in it.
... parameters hiddenframe : hiddenframe the frame to add remove(hiddenframe) unregister a hidden frame, unloading any content that was loaded in it.
window/utils - Archive of obsolete content
parameters window : nsidomwindow returns nsidocshell getwindowloadingcontext(window) returns the nsiloadcontext.
...note that these windows may still be loading.
Modifying the Page Hosted by a Tab - Archive of obsolete content
loading several content script files the data assigned to contentscriptfile can be a vector.
... in the following example, we are loading two scripts, first.js & second.js.
Examples and demos from articles - Archive of obsolete content
[article] image preview before upload [html] the filereader.prototype.readasdataurl() method is useful, for example, to get a preview of an image before uploading it.
... ajax – submitting forms and uploading files this paragraph shows how to submit forms in pure-ajax.
On page load - Archive of obsolete content
if you need finer control over custom code execution—for example, as documents are loading or when tabs are switched—see progress listeners.
... progress listeners allow extensions to be notified of events associated with documents loading in the browser and with tab switching events.
Code snippets - Archive of obsolete content
browser-oriented code tabbed browser code (firefox/seamonkey) basic operations, such as page loading, with the tabbed browser, which is the heart of mozilla's browser applications cookies reading, writing, modifying, and removing cookies page loading code used to load pages, reload pages, and listen for page loads interaction between privileged and non-privileged code how to communicate from extensions to websites and vice-versa.
... downloading files code to download files, images, and to monitor download progress password manager code used to read and write passwords to/from the integrated password manager bookmarks code used to read and write bookmarks javascript debugger service code used to interact with the javascript debugger service svg general general information and utilities svg animation animate svg using javascript and smil svg interacting with script using javascript and dom events to create interactive svg embedding svg in html and xul using svg to enhance html or xul based markup xul widgets html in xul for rich tooltips dynamically embed html into a xul element to attain markup in a tooltip label and description special uses and line breaking examples tree setup and manipulation...
Appendix A: Add-on Performance - Archive of obsolete content
the firefox window will be able to load sooner and your startup code will run almost instantaneously afterward, in parallel with the loading of the homepage or the saved tab session.
...nevertheless, loading pages is pretty important in firefox, and users expect it to be fast.
Setting Up a Development Environment - Archive of obsolete content
build system let's start by downloading the project used to build the second version of hello world, from the exercise in the last section.
...you can do this by opening the automator application, choosing run shell script and then entering the profile-loading script in the textbox: /applications/firefox.app/contents/macos/firefox-bin -no-remote -p myprofile > /dev/null & you can change "/dev/null" to a file location, in case you want to see dump output from firefox, or other extensions.
Security best practices in extensions - Archive of obsolete content
the main way to do this is by creating an iframe or browser element in the sidebar, and loading your content there.
...for example, if you are loading pictures or other data from a photo sharing site, you can sandbox your connections to that site so that the normal browsing of that site by the user in the main firefox browser is not affected.
Session store API - Archive of obsolete content
it's worth noting that this event is sent even if tab loading at startup is deferred until the user selects the tab.
... when the page is finished loading, text fields and scroll state are restored.
Promises - Archive of obsolete content
notifyuser(xhr.responsetext); }); downloading remote files nearly all previous methods of downloading remote files have been superseded by the much simpler downloads.jsm module.
... the downloads object provides a promise-based api for downloading remote files, with full support for progress tracking, pause and resume, and, optionally, integration with the download manager ui.
CSS3 - Archive of obsolete content
clarifies: interaction of media-dependent @import statements and style sheet loading requirements.
... css object model (cssom) working draft css font loading module level 3 working draft css scoping module level 1 working draft css inline layout working draft css images module level 4 working draft extends: the image() functional notation to describe the directionality of the image (rtl or ltr), allowing for bidi-sensitive images.
error - Archive of obsolete content
the error event is fired when an error occurred while downloading the cache manifest or updating the content of the application.
... related events checking noupdate downloading progress cached updateready obsolete error ...
progress - Archive of obsolete content
the progress event is fired when the user agent is downloading resources listed by the manifest.
... related events checking noupdate downloading progress cached updateready obsolete error ...
Inner-browsing extending the browser navigation paradigm - Archive of obsolete content
this model is also interesting because is optimized to access contextual data instead reloading full web pages.
...one is to keep checking the iframe until the document has completed loading.
Source code directories overview - Archive of obsolete content
docshell contains c interfaces and code for loading and displaying a single web page (e.g.
...xpinstall provides code for downloading files, uncompressing them and installing them in a platform independent way.
Modularization techniques - Archive of obsolete content
about nsiids and nscids to simplify the process of dynamically finding, loading and binding interfaces, all classes and interfaces are assigned unique ids.
...if implemented, it allows the nsrepository to free up memory by unloading dlls it is no longer using when freelibraries() is called.
Scripting - Archive of obsolete content
load after the main application windows has finished loading.
...error if there is an error loading the main app page (e.g.
Running Tamarin acceptance tests - Archive of obsolete content
you may build the .abc files build by downloading the latest asc.jar.
...- you may build the .abc files build by downloading the latest asc.jar.
ContextMenus - Archive of obsolete content
var element = aevent.target.triggernode; var isimage = (element instanceof components.interfaces.nsiimageloadingcontent && element.currenturi); document.getelementbyid("enlarge").hidden = !isimage; document.getelementbyid("details").hidden = !isimage; } </script> <menupopup id="contentareacontextmenu" onpopupshowing="showhideitems(event)"> <menuitem label="copy"/> <menuitem id="enlarge" label="enlarge image"/> <menuitem id="details" label="image details"/> </menupopup> <browser ...
...the nsiimageloadingcontent interface is implemented by all types of images.
RDF Modifications - Archive of obsolete content
when reloading a datasource, you might think that the rdf parser removes all the existing data, loads the new data, and adds it to the datasource.
...when reloading a datasource, it keeps the existing rdf triples intact, and only modifies the datasource based on what has changed.
image - Archive of obsolete content
ArchiveMozillaXULimage
attributes onerror, onload, src, validate properties accessibletype, src style classes alert-icon, error-icon, message-icon, question-icon examples <image src='firefoxlogo.png' width='135' height='130'/> attributes onerror type: script code this event is sent to an image element when an error occurs loading the image.
... image.onload type: script code this event handler will be called on the image element when the image has finished loading.
tabbrowser - Archive of obsolete content
webprogress type: nsiwebprogress this read-only property contains an nsiwebprogress object which is used to monitor the progress of a document loading.
... stop() return type: no return value equivalent to pressing the stop button, this method stops the currently loading document.
XULRunner Hall of Fame - Archive of obsolete content
xulrunner is embedded to provide automatic search against journal archives, automatic acquisition of bibtex information, and automatic downloading of pdfs.
... emusic remote the emusic remote makes downloading from emusic a snap.
calICalendarView - Archive of obsolete content
note that in most cases, this attribute will be set by the consumers of calicalendarview very early in an application/extension's loading process.
...implementations should therefore be wary to check whether a controller has been assigned to the view, before calling any of the methods it implements.note that in most cases, this attribute will be set by the consumers of calicalendarview very early in an application/extension's loading process.
nsIContentPolicy - Archive of obsolete content
implementations of this interface can be used to control the loading of various types of out-of-line content, or the processing of certain types of inline content.
...this method is called before loading the resource specified by acontentlocation to determine whether or not to start loading the requested resource.
Troubleshooting XForms Forms - Archive of obsolete content
if your are loading your file directly from the filesystem, make sure that has .xhtml or .xml as the file ending.
... if you are loading the form from a server, make sure that it serves the files as either application/xhtml+xml or text/xml.
Popup Window Controls - Archive of obsolete content
mozilla will attempt to suppress all calls to window.open() which occur in the following circumstances: global script which is executed as the document is loading script executed as part of a onload event handler script executed in settimeout() or setinterval() what popup windows are not suppressed?
... replacements for popup windows if your popup was created during the time the web page was loading, you may consider using document.write() to emit appropriate html which will contain the same information as the popup window.
Game distribution - Game development
bear in mind that downloading the game might still take a bit of time depending on the size of the game and your network speed.
...remember that you have to deal with the cross-platform issues yourself by uploading separate versions for different platforms.
Building up a basic demo with the PlayCanvas engine - Game development
built for modern browsers, playcanvas is a fully-featured 3d game engine with resource loading, an entity and component system, advanced graphics manipulation, collision and physics engine (built with ammo.js), audio, and facilities to handle control inputs from various devices (including gamepads).
... try saving the file and loading it in your browser.
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.
... loading the animation next up, go into your create() function, find the line that loads the ball sprite, and below it put the call to animations.add() seen below: ball = game.add.sprite(50, 250, 'ball'); ball.animations.add('wobble', [0,1,0,2,0,1,0,2,0], 24); to add an animation to the object we use the animations.add() method, which contains the following parameters the name we chose for the animation an array defining the order in which to display the frames during the animation.
Initialize the framework - Game development
p - 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.
Visual typescript game engine - Game development
no reloading or redirecting.
...i use html request only for loading local/staged html (like register, login etc.).
Code splitting - MDN Web Docs Glossary: Definitions of Web-related terms
to prevent the requirement of downloading ginormous files, scripts can be split into multiple smaller files.
... see also bundling lazy loading http/2 tree shaking ...
WAI-ARIA basics - Learn web development
content that updates without the entire page reloading via a mechanism like xmlhttprequest, fetch, or dom apis.
...if you just load the file by loading it directly into the browser (via double clicking, etc.).
Web fonts - Learn web development
check the checkbox labeled "yes, the fonts i'm uploading are legally eligible for web embedding." click download your kit.
...in newer browsers, you can also specify a unicode-range value, which is a specific range of characters you want to use out of the web font — in supporting browsers, only the specified characters will be downloaded, saving unnecessary downloading.
How do I use GitHub Pages? - Learn web development
your screen should look like this: click create repository; this should bring you to the following page: uploading your files to github on the current page, you are interested in the section …or push an existing repository from the command line.
...these prepare the code for uploading to github, and ask git to manage these files.
HTML forms in legacy browsers - Learn web development
yepnope is a conditional loading library.
... pay attention to performance even though scripts like modernizr are very aware of performance, loading a 200 kilobyte polyfill can affect the performance of your application.
Sending forms through JavaScript - Learn web development
a form is not always a form with progressive web apps, single page apps, and framework based apps, it's common to use html forms to send data without loading a new document when response data is received.
... file.dom.addeventlistener( "change", function () { if( reader.readystate === filereader.loading ) { reader.abort(); } reader.readasbinarystring( file.dom.files[0] ); } ); // senddata is our main function function senddata() { // if there is a selected file, wait it is read // if there is not, delay the execution of the function if( !file.binary && file.dom.files.length > 0 ) { settimeout( senddata, 10 ); return; } // to construct our mu...
Use JavaScript within a webpage - Learn web development
you can hardly ever predict just how long it will take for users or browsers to complete an process (especially asynchronous actions such as loading resources).
...people may have javascript turned off to improve speed and security, and users often face network issues that prevent loading scripts.
What’s in the head? Metadata in HTML - Learn web development
if you encounter problems with the favicon not loading, verify that the content-security-policy header's img-src directive is not preventing access to it.
...there are actually a number of ways to handle loading javascript on your page, but this is the most foolproof one to use for modern browsers (for others, read script loading strategies).
Adding vector graphics to the Web - Learn web development
the svg file can be cached by the browser, resulting in faster loading times for any page that uses the image loaded in the future.
...make sure your svg code snippet begins and ends with the <svg></svg> tags (don't include anything outside those.) here's a very simple example of what you might paste into your document: <svg width="300" height="200"> <rect width="100%" height="100%" fill="green" /> </svg> pros putting your svg inline saves an http request, and therefore can reduce a bit your loading time.
Images in HTML - Learn web development
but if the image isn't being displayed, for example, the user has just navigated to the page, and the image hasn't yet loaded, you'll notice the browser is leaving a space for the image to appear in: this is a good thing to do, resulting in the page loading quicker and more smoothly.
...if you set the image size too big, you'll end up with images that look grainy, fuzzy, or too small, and wasting bandwidth downloading an image that is not fitting the user's needs.
From object to iframe — other embedding technologies - Learn web development
note: in order to improve speed, it's a good idea to set the iframe's src attribute with javascript after the main content is done with loading.
... a quick example first though — try loading the previous example we showed above into your browser — you can find it live on github (see the source code too.) you won't actually see anything displayed on the page, and if you look at the console in the browser developer tools, you'll see a message telling you why.
Responsive images - Learn web development
doing so can waste bandwidth; in particular, mobile users don't want to waste bandwidth by downloading a large image intended for desktop, when a small image would do for their device.
... note: in the <head> of the example linked above, you'll find the line <meta name="viewport" content="width=device-width">: this forces mobile browsers to adopt their real viewport width for loading web pages (some mobile browsers lie about their viewport width, and instead load pages at a larger viewport width then shrink the loaded page down, which is not very helpful for responsive images or design).
Client-side storage - Learn web development
note: in the line <script src="index.js" defer></script> of the source for our finished version, the defer attribute specifies that the contents of the <script> element will not execute until the page has finished loading.
... next, add the following to the bottom of your code: window.onload = function() { }; we will write all of our subsequent code inside this window.onload event handler function, called when the window's load event fires, to make sure we don't try to use indexeddb functionality before the app has completely finished loading (it could fail if we don't).
Drawing graphics - Learn web development
at this point, the browser starts loading the image.
...we can achieve this using the onload event handler, which will only be invoked when the image has finished loading.
Fetching data from the server - Learn web development
originally page loading on the web was simple — you'd send a request for a website to a server, and as long as nothing went wrong, the assets that made the web page would be downloaded and displayed on your computer.
... to speed things up even further, some sites also store assets and data on the user's computer when they are first requested, meaning that on subsequent visits they use the local versions instead of downloading fresh copies when the page is first loaded.
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/ ) ...
Web performance resources - Learn web development
lazy loading parts of your application outside the viewport.
... if you do, have a backup plan for seo (e.g render full page for bot traffic); for example, by using the loading attribute on the <img> element it is also crucial to realize what is really important to your users.
Web performance - Learn web development
this article introduces the components of performance, from web page loading and rendering, including how your content makes it into your users browser to be viewed, to what groups of people we need to consider when thinking about performance, how do users perceive performance?
...in this article, we discuss the various loading metrics, animation, and responsiveness metrics, along with best practices to improve user perception, if not the actual timings.
mozbrowserloadend
the mozbrowserloadend event is fired when the browser <iframe> has finished loading all its assets, or has failed to load.
... this can be used when the embedder wants to stop spinning a loading indicator, or update the ui in some other way to indicate loading is complete.
Gecko SDK
downloading for gecko versions before 2.0, you should choose the gecko sdk version for the earliest version of mozilla you wish to target.
...this can be done by downloading the source code for firefox and using the --with-libxul-sdk option to configure.
How Mozilla determines MIME Types
when loading an uri with a type that mozilla can not handle, a helper app dialog shows up, and the displayed information comes from these sources: ask the os for a handler of the given <extension, mime type> pair.
... related information document loading - from load start to finding a handler original document information author(s): christian biesinger last updated date: march 7, 2005 copyright information: copyright (c) christian biesinger ...
Downloads.jsm
the downloads.jsm javascript code module provides a single entry point to interact with the downloading capabilities of the platform, including starting new downloads, controlling ongoing downloads, and retrieving download-related configuration.
... examples downloading to a local file this example downloads an html file without showing progress, handling errors programmatically.
WebRequest.jsm
examples basic examples this example just logs the url for every request initiated: let {webrequest} = cu.import("resource://gre/modules/webrequest.jsm", {}); webrequest.onbeforerequest.addlistener(logurl); function logurl(e) { console.log("loading: " + e.url); } filtering this example logs urls for requests under "https://developer.mozilla.org/": let {webrequest} = cu.import("resource://gre/modules/webrequest.jsm", {}); cu.import("resource://gre/modules/matchpattern.jsm"); let pattern = new matchpattern("https:/developer.mozilla.org/*"); webrequest.onbeforerequest.addlistener(logurl, {urls: pattern}); function logurl(e) { console.
...log("loading: " + e.url); } this listener will be invoked for requests matching any of the three patterns, where the resource type is "stylesheet" or "image": let {webrequest} = cu.import("resource://gre/modules/webrequest.jsm", {}); cu.import("resource://gre/modules/matchpattern.jsm"); let pattern = new matchpattern(["https://mozorg.cdn.mozilla.net/*", "https://mdn.mozillademos.org/*", "https://developer.cdn.mozilla.net/*"]); webrequest.onbeforerequest.addlistener(listener, { urls: pattern, types: ["image", "stylesheet"] }); function listener(e) { console.log("matched: " + e.url); } canceling this example...
Application Translation with Mercurial
getting the current texts in english and your locale obtaining the english texts with the source code get the source code by downloading the following file: firefox desktop or firefox for android: download the mozilla-<branch>.hg file (e.g.
... mozilla-aurora.hg) from https://ftp.mozilla.org/pub/mozilla.org/firefox/bundles/ the file is not small, but after initially downloading it, you only need to download the latest changes in the future.
Localization and Plurals
chrome://mozapps/locale/downloads/do...tes,hours,days chrome://mozapps/locale/downloads/do...dstitlepercent chrome://browser/locale/browser.prop...auseddownloads version history 0.1: initial version with pluralrule check, properties input loading, table generation, sample output display 0.2: use pluralform.numforms() to get the number of forms instead of figuring out locally to better support future rules - requires build from 2007/01/27 or later 0.3: generate a list of what numbers fall into which plural form to minimize the sample output to at most 3 of each form developing with pluralform the functionality for getting the correct p...
... loading pluralform.jsm loading the pluralform module from javascript is simple with components.utils.import.
Mozilla Style System
the style system is the module of mozilla's code responsible for the loading and parsing of css style sheets, and the computation of computed values for all css properties.
... rule tree style data computation css style sheet backend loading parsing data structures cascading html mapped attribute backend css style attribute backend handling of dynamic changes see also mozilla style system documentation (2002) style system tech talk (2002) ...
Investigating leaks using DMD heap scan mode
the output will look something like this, after a message about loading progress: 0x7f0882fe3230 [fragmentorelement (xhtml) script https://www.example.com] --[[via hash] mlistenermanager]--> 0x7f0899b4e550 [eventlistenermanager] --[mlisteners event=onload listenertype=3 [i]]--> 0x7f0882ff8f80 [callbackobject] --[mincumbentglobal]--> 0x7f0897082c00 [nsglobalwindowinner # 2147483662 inner https://www.example.com] root 0x7f0882fe3230 is a ref counte...
...that gave a result that contained this: 0x7f0882fe3230 [fragmentorelement (xhtml) script [...] --[mnodeinfo]--> 0x7f0897431f00 [nodeinfo (xhtml) script] [...] --[mloadingasyncrequests]--> 0x7f0892f29630 [scriptloadrequest] this confirms that this block is actually a scriptloadrequest.
Gecko Profiler FAQ
ie: i want to measure perf of loading the same page with different stylo configurations.
... [ehsan] that being said, we do see a lot of windows-specific issues that you will not find on other platforms, for example sometimes code calls into a windows api that requires loading a dll the first time you call it that takes 10s of milliseconds to finish, etc.
Profiling with the Firefox Profiler
access cleopatra from your web browser by loading the page localhost:8000, and upload run.symb.cleo to render the profile with most of the symbol information.
... sharing, saving and loading profiles after capturing and viewing a profile you will see "share..." and "save as file..." buttons in the top-right of the window.
about:memory
loading memory reports from file the easiest way to load memory reports from file is to use the "load..." button.
... single memory report files can also be loaded automatically when about:memory is loaded by appending a file query string, for example: about:memory?file=/home/username/reports.json.gz this is most useful when loading memory reports files obtained from a firefox os device.
An overview of NSS Internals
a recent development adds support for loading external pem files that contain private keys, in a software library called nss-pem, which is separately available, but should eventually become a core part of nss.
...examples are retrieving ocsp (online certificate status protocol) information or downloading a crl (certificate revocation list).
PKCS #11 Module Specs
moduledb - this library includes nss specific functions to supply additional module specs for loading.
... moduledbonly - this library has no pkcs #11 functions and is only used for loading additional modules.
NSS tools : certutil
add one or multiple extensions that certutil cannot encode yet, by loading their encodings from external files.
... listing security modules the devices that can be used to store certificates -- both internal databases and external devices like smart cards -- are recognized and used by loading security modules.
Network Security Services
for information on downloading nss releases as tar files, see download pki source.
...describes the scheme for loading root ca certificates.
Rhino history
first, compilation time was long since generating java bytecodes and loading the generated classes was a heavyweight process.
... also, the implementation effectively leaked memory since most jvms don't really collect unused classes or the strings that are interned as a result of loading a class file.
Index
if the script is not cached, it tries to load the source from file, and returns nullptr if an error happened while loading.
... 526 rebranding spidermonkey (1.8.5) build documentation, spidermonkey after installing the build pre-requisites and downloading the spidermonkey source tarball issue the following commands at the terminal: 527 spidermonkey internals guide, javascript, needsupdate, spidermonkey at heart, spidermonkey is a fast interpreter that runs an untyped bytecode and operates on values of type js::value—type-tagged values that represent the full range of javascript values.
Setting up an update server
downloading a mar prebuilt nightly mars can be found here on archive.mozilla.org.
...you should see it downloading the update to the update directory.
Gecko events
art scrolling has started on a scroll bar is supported: yes event_scrolling_end scrolling has ended on a scroll bar is supported: yes event_minimize_start a window object is about to be minimized or maximized is supported: no event_minimize_end a window object has been minimized or maximized is supported: no event_document_load_start is supported: yes event_document_load_complete the loading of the document has completed.
... is supported: yes event_document_load_stopped the loading of the document was interrupted.
XForms Accessibility
these are either downloading latest build of firefox or building it yourself.
... downloading builds notion: xforms is no longer distributed with firefox build.
Feed content access API
loading the feed and sending it to the parser is done using code similar to this: fetch: function(feedurl) { var httprequest = null; function inforeceived() { var data = httprequest.responsetext; var ioservice = components.classes['@mozilla.org/network/io-service;1'] .getservice(components.interfaces.nsiioservice); var uri = ioservi...
...atch(e) { alert("error parsing feed."); } } } httprequest = new xmlhttprequest(); httprequest.open("get", feedurl, true); try { httprequest.onload = inforeceived; httprequest.send(null); } catch(e) { alert(e); } } the nsifeedprocessor interface lets you parse the feed data from several possible sources; in this case, we're loading a document into a string, then parsing that string using its parsefromstring() method.
XPCOM changes in Gecko 2.0
this was necessary in order to ensure that any components that should no longer be available are disposed of properly, and to re-register everything, loading any new components that may be needed.
...once that's done, the extensions can then be loaded by simply reading their manifests, loading their components, and continuing the startup process, all without having to restart the browser.
Components.utils.import
gecko 2.0 adds support for loading modules from chrome: urls, even those inside jar archives.
... example components.utils.import("resource://gre/modules/xpcomutils.jsm", this); difference from mozijssubscriptloader the differences from mozijssubscriptloader: the behavior when importing/loading the same code from different locations: the subscript loader evaluates the specified code each time it is invoked, with the caller's global object.
nsIAccessibleEvent
event_document_load_complete 0x002b 0x0027 the loading of the document has completed.
... event_document_load_stopped 0x002d 0x0029 the loading of the document was interrupted.
nsIApplicationCacheNamespace
constants constant value description namespace_bypass 1 items matching this namespace can be fetched from the network when loading from this cache.
... namespace_fallback 2 items matching this namespace can be fetched from the network when loading from this cache; however, if the load fails, the cache entry specified by the data attribute should be loaded intstead.
nsICategoryManager
the second portion of this snippet disables plugins from loading in the future, it does not user the category manager but it is included for completness of the example.
...let categorymanager = cc['@mozilla.org/categorymanager;1']; categorymanager.getservice(ci.nsicategorymanager).deletecategoryentry('gecko-content-viewers', content_type, false); // update pref manager to prevent plugins from loading in future var stringtypes = ''; var types = []; var pref_disabled_plugin_types = 'plugin.disable_full_page_plugin_for_types'; if (services.prefs.prefhasuservalue(pref_disabled_plugin_types)) { stringtypes = services.prefs.getcharpref(pref_disabled_plugin_types); } if (stringtypes !== '') { types = stringtypes.split(','); } if (types.indexof(content_type) === -1) { types.push(content_type); } services.prefs.setcharpref(pref_disabled_plugin_types...
nsIChannelEventSink
it is important to understand that oldchannel will continue loading as if it received a response of http 200, which includes notifying observers and possibly display or process content attached to the http response.
... if the sink wants to prevent this loading it must explicitly deal with it, e.g.
nsIContentViewer
pagehide() void pagehide( in boolean isunload ); parameters isunload missing description exceptions thrown missing exception missing description permitunload() determins whether or not the document wants to prevent unloading by firing beforeunload on the document, and if it does, prompts the user.
... return value true if the document will allow unloading; otherwise false.
nsIDOMOfflineResourceList
ondownloading nsidomeventlistener an event listener to be called when resources are being downloaded into the cache.
... downloading 3 resources are being downloaded to be added to the cache.
nsIDownloadManager
download_downloading 0 the download is in the process of being downloaded.
... download_queued 5 the download is in the queue but is not presently downloading.
nsIFrameLoader
content/base/public/nsiframeloader.idlscriptable handles loading a frame.
... loadframe() starts loading the frame.
nsIGlobalHistory3
method overview void adddocumentredirect(in nsichannel aoldchannel, in nsichannel anewchannel, in print32 aflags, in boolean atoplevel); unsigned long geturigeckoflags(in nsiuri auri); void seturigeckoflags(in nsiuri auri, in unsigned long aflags); methods adddocumentredirect() notifies the history system that the page loading via aoldchannel redirected to anewchannel.
...these flags are used by gecko as hints to optimize page loading.
nsIMsgFolder
inherits from: nsisupports method overview void startfolderloading(); void endfolderloading(); void updatefolder(in nsimsgwindow awindow); nsimsgfilterlist getfilterlist(in nsimsgwindow msgwindow); void setfilterlist(in nsimsgfilterlist filterlist); void forcedbclosed(); void delete(); void deletesubfolders(in nsisupportsarray folders, in nsimsgwindow msgwindow); void propagatedelete(in nsimsgfolder folder, in boolean deletestorage,in nsimsgwindow msgwindow); ...
... methods startfolderloading() void startfolderloading(); endfolderloading() void endfolderloading(); updatefolder() get new headers for the database.
nsIProtocolProxyService
use resolveasync instead previous doc this method returns a nsiproxyinfo instance that identifies a proxy to be used for loading the given uri.
... note: if pac is configured, and the pac file has not yet been loaded, then this method will return a nsiproxyinfo instance with a type of "unknown" to indicate to the consumer that asyncresolve should be used to wait for the pac file to finish loading.
nsIUpdate
olkit/mozapps/update/nsiupdateservice.idlscriptable an interface that describes an object representing an available update to the current application - this update may have several available patches from which one must be selected to download and install, for example we might select a binary difference patch first and attempt to apply that, then if the application process fails fall back to downloading a complete file-replace patch.
... state astring the state of the selected patch: "downloading" the update is being downloaded.
nsIUpdateCheckListener
onerror() called when an error occurs while loading the remote update service file.
... onprogress() called every time there is a progress notification loading the update service file.
nsIUploadChannel
netwerk/base/public/nsiuploadchannel.idlscriptable a channel may optionally implement this interface if it supports the notion of uploading a data stream.
... history here is that we need to support both streams that already have headers (for example, content-type and content-length) information prepended to the stream (by plugins) as well as clients (composer, uploading application) that want to upload data streams without any knowledge of protocol specifications.
nsIWebNavigation
this will give priority to loading the requested uri in the object implementing this interface.
... if it can't be loaded here however, the uri dispatcher will go through its normal process of content loading.
nsIWebProgress
the nsiwebprogress interface is used to add or remove nsiwebprogresslistener instances to observe the loading of asynchronous requests (usually in the context of a dom window).
... isloadingdocument prbool indicates whether or not a document is currently being loaded in the context of this nsiwebprogress instance.
nsIWindowMediator
this example below waits for listens to when a window opens, and then after that window opens it adds event listener to listen to when the window completes loading, after that it fires a function.
... var {cc: classes, ci: interfaces} = components; var windowlistener = { onopenwindow: function (awindow) { // wait for the window to finish loading let domwindow = awindow.queryinterface(ci.nsiinterfacerequestor).getinterface(ci.nsidomwindowinternal || ci.nsidomwindow); domwindow.addeventlistener("load", function () { domwindow.removeeventlistener("load", arguments.callee, false); //this removes this load function from the window //window has now loaded now do stuff to it //as example this ...
ctypes.open
loading the native file if your addon is restartless, you must set it to be unpacked.
...therefore, the path has to be converted and then the converted path is used for loading with ctypes.open.
Plug-in Basics - Plugins
the following stages outline the life of a plug-in from loading to deletion: when gecko encounters data of a mime type registered for a plug-in (either embedded in an html page or in a separate file), it dynamically loads the plug-in code into memory, if it hasn't been loaded already, and it creates a new instance of the plug-in.
...if it knows how to deal with that mime type (i.e., by loading a plug-in that's been registered for it), then it does so.
DevTools API - Firefox Developer Tools
if the tool is not already loaded or currently loading the returned promise won't be fulfilled until something triggers the tool to load.
... return value: a promise that is fulfilled with the toolpanel object once the tool has finished loading.
Network request details - Firefox Developer Tools
started: when the resource started downloading.
... downloaded: when the the resource finished downloading.
Network request list - Firefox Developer Tools
the request list of the network monitor shows a list of all the network requests made in the course of loading the page.
... network request list by default, the network monitor shows a list of all the network requests made in the course of loading the page.
about:debugging - Firefox Developer Tools
extensions loading a temporary extension with the load temporary add-on button you can temporarily load a web extension from a directory on disk.
... you don't have to package or sign the extension before loading it, and it stays installed until you restart firefox.
Optimizing canvas - Web APIs
pre-render similar primitives or repeating objects on an offscreen canvas if you find yourself repeating some of the same drawing operations on each animation frame, consider offloading them to an offscreen canvas.
... don’t scale images in drawimage cache various sizes of your images on an offscreen canvas when loading as opposed to constantly scaling them in drawimage().
FontFace.display - Web APIs
WebAPIFontFacedisplay
when this property is used, font loading has a timeline with three periods.
... specifications specification status comment css font loading module level 3the definition of 'display' in that specification.
FontFace.load - Web APIs
WebAPIFontFaceload
return value a promise that resolves with a reference to the current fontface object when the font loads or rejects with a networkerror if the loading process fails.
... specifications specification status comment css font loading module level 3the definition of 'load' in that specification.
FontFace.loaded - Web APIs
WebAPIFontFaceloaded
the loaded read-only property of the fontface interface returns a promise that resolves with the current fontface object when the font specified in the object's constructor is done loading or rejects with a syntaxerror.
... specifications specification status comment css font loading module level 3the definition of 'loaded' in that specification.
FontFaceSetLoadEvent - Web APIs
the fontfacesetloadevent interface of the the css font loading api is fired whenever a fontfaceset loads.
... specifications specification status comment css font loading module level 3the definition of 'fontfacesetloadevent' in that specification.
HTMLImageElement.crossOrigin - Web APIs
example in this example, a new <img> element is created and added to the document, loading the image with the anonymous state; the image will be loaded using cors and credentials will be used for all cross-origin loads.
... const imageurl = "https://mdn.mozillademos.org/files/16797/clock-demo-400px.png"; const container = document.queryselector(".container"); function loadimage(url) { const image = new image(200, 200); image.addeventlistener("load", () => container.prepend(image) ); image.addeventlistener("error", () => { const errmsg = document.createelement("output"); errmsg.value = `error loading image at ${url}`; container.append(errmsg); }); image.crossorigin = "anonymous"; image.alt = ""; image.src = url; } loadimage(imageurl); html <div class="container"> <p>here's a paragraph.
HTMLImageElement.decode() - Web APIs
this can be used to initiate loading of the image prior to attaching it to an element in the dom (or adding it to the dom as a new element), so that the image can be rendered immediately upon being added to the dom.
... usage notes one potential use case for decode(): when loading very large images (for example, in an online photo album), you can present a low resolution thumbnail image initially and then replace that image with the full-resolution image by instantiating a new htmlimageelement, setting its source to the full-resolution image's url, then using decode() to get a promise which is resolved once the full-resolution image is ready for use.
HTMLImageElement.decoding - Web APIs
usage notes the decoding property allows you to control whether or not the browser is allowed to try to parallelize loading your image.
... if doing so would cause problems, you can specify sync to disable asynchronous loading.
HTMLMediaElement: suspend event - Web APIs
the suspend event is fired when media data loading has been suspended.
... using addeventlistener(): const video = document.queryselector('video'); video.addeventlistener('suspend', (event) => { console.log('data loading has been suspended.'); }); using the onsuspend event handler property: const video = document.queryselector('video'); video.onsuspend = (event) => { console.log('data loading has been suspended.'); }; specifications specification status html living standardthe definition of 'suspend media event' in that specification.
HTMLMediaElement - Web APIs
loadeddata fired when the first frame of the media has finished loading.
... suspend fired when the media data loading has been suspended.
HTMLTrackElement - Web APIs
loading 1 indicates that the text track is loading and there have been no fatal errors encountered so far.
... usage notes loading of the track's text resource the webvtt or ttml data describing the actual cues for the text track isn't loaded if the track's mode is initially in the disabled state.
IDBDatabase - Web APIs
for a complete working example, see our to-do notifications app (view example live.) // let us open our database var dbopenrequest = window.indexeddb.open("todolist", 4); // these two event handlers act on the idbdatabase object, // when the database is opened successfully, or not dbopenrequest.onerror = function(event) { note.innerhtml += '<li>error loading database.</li>'; }; dbopenrequest.onsuccess = function(event) { note.innerhtml += '<li>database initialised.</li>'; // store the result of opening the database in the db // variable.
...e idb displaydata(); }; // this event handles the event whereby a new version of // the database needs to be created either one has not // been created before, or a new version number has been // submitted via the window.indexeddb.open line above dbopenrequest.onupgradeneeded = function(event) { var db = event.target.result; db.onerror = function(event) { note.innerhtml += '<li>error loading database.</li>'; }; // create an objectstore for this database using // idbdatabase.createobjectstore var objectstore = db.createobjectstore("todolist", { keypath: "tasktitle" }); // define what data items the objectstore will contain objectstore.createindex("hours", "hours", { unique: false }); objectstore.createindex("minutes", "minutes", { unique: false }); objectstore.crea...
IDBObjectStore.createIndex() - Web APIs
dbopenrequest.onerror = function(event) { note.innerhtml += '<li>error loading database.</li>'; }; dbopenrequest.onsuccess = function(event) { note.innerhtml += '<li>database initialised.</li>'; // store the result of opening the database in the db variable.
...dbopenrequest.onupgradeneeded = function(event) { var db = event.target.result; db.onerror = function(event) { note.innerhtml += '<li>error loading database.</li>'; }; // create an objectstore for this database var objectstore = db.createobjectstore("todolist", { keypath: "tasktitle" }); // define what data items the objectstore will contain objectstore.createindex("hours", "hours", { unique: false }); objectstore.createindex("minutes", "minutes", { unique: false }); objectstore.createindex("day", "day", { unique: false ...
IDBObjectStore.deleteIndex() - Web APIs
for a full working example, see our to-do notifications app (view example live.) var db; // let us open our database var dbopenrequest = window.indexeddb.open("todolist", 4); // these two event handlers act on the database being opened successfully, or not dbopenrequest.onerror = function(event) { note.innerhtml += '<li>error loading database.</li>'; }; dbopenrequest.onsuccess = function(event) { note.innerhtml += '<li>database initialised.</li>'; // store the result of opening the database in the db variable.
...is event handles the event whereby a new version of the database needs to be created // either one has not been created before, or a new version number has been submitted via the // window.indexeddb.open line above //it is only implemented in recent browsers dbopenrequest.onupgradeneeded = function(event) { var db = this.result; db.onerror = function(event) { note.innerhtml += '<li>error loading database.</li>'; }; // create an objectstore for this database var objectstore = db.createobjectstore("todolist", { keypath: "tasktitle" }); // define what data items the objectstore will contain objectstore.createindex("hours", "hours", { unique: false }); objectstore.createindex("minutes", "minutes", { unique: false }); objectstore.createindex("day", "day", { unique: false ...
IDBOpenDBRequest.onblocked - Web APIs
}; example var db; // let us open our database var request = indexeddb.open("todolist", 4); // these two event handlers act on the database being opened // successfully, or not request.onerror = function(event) { note.innerhtml += '<li>error loading database.</li>'; }; request.onsuccess = function(event) { note.innerhtml += '<li>database initialised.</li>'; // store the result of opening the database in the db variable.
...either one has not been created // before, or a new version number has been submitted via the // window.indexeddb.open line above //it is only implemented in recent browsers request.onupgradeneeded = function(event) { var db = event.target.result; db.onerror = function(event) { note.innerhtml += '<li>error loading database.</li>'; }; // create an objectstore for this database var objectstore = db.createobjectstore("todolist", { keypath: "tasktitle" }); ...
IDBOpenDBRequest.onupgradeneeded - Web APIs
request.onupgradeneeded = function(event) { db = request.result; db.onerror = function(errorevent) { note.innerhtml += '<li>error loading database.</li>'; }; if (event.oldversion < 1) { // version 1 is the first version of the database.
... var magazines = db.createobjectstore("magazines"); var publisherindex = magazines.createindex("by_publisher", "publisher"); var frequencyindex = magazines.createindex("by_frequency", "frequency"); } }; request.onerror = function(event) { note.innerhtml += '<li>error loading database.</li>'; }; request.onsuccess = function(event) { note.innerhtml += '<li>database initialised.</li>'; db = request.result; populateanddisplaydata(); }; specifications specification status comment indexed database api 2.0the definition of 'onupgradeneeded' in that specification.
IDBOpenDBRequest - Web APIs
dbopenrequest.onerror = function(event) { note.innerhtml += '<li>error loading database.</li>'; }; dbopenrequest.onsuccess = function(event) { note.innerhtml += '<li>database initialised.</li>'; // store the result of opening the database in the db // variable.
...vent handles the event whereby a new version of // the database needs to be created either one has not // been created before, or a new version number has been // submitted via the window.indexeddb.open line above // it is only implemented in recent browsers dbopenrequest.onupgradeneeded = function(event) { var db = this.result; db.onerror = function(event) { note.innerhtml += '<li>error loading database.</li>'; }; // create an objectstore for this database var objectstore = db.createobjectstore("todolist", { keypath: "tasktitle" }); // define what data items the objectstore will contain objectstore.createindex("hours", "hours", { unique: false }); objectstore.createindex("minutes", "minutes", { unique: false }); objectstore.createindex("day", "day", { unique: false ...
Using IndexedDB - Web APIs
as a workaround for this normal shutdown notification, you might track your transactions and add a beforeunload event to warn the user if any transactions have not yet completed at the time of unloading.
...ist"></ul>'); compat_envs.foreach(function(val, idx, array) { $('#compat-list').append('<li>' + val[0] + ': ' + val[1] + '</li>'); }); const db_name = 'mdn-demo-indexeddb-epublications'; const db_version = 1; // use a long long for this value (don't use a float) const db_store_name = 'publications'; var db; // used to keep track of which view is displayed to avoid uselessly reloading it var current_view_pub_key; function opendb() { console.log("opendb ..."); var req = indexeddb.open(db_name, db_version); req.onsuccess = function (evt) { // equal to: db = req.result; db = this.result; console.log("opendb done"); }; req.onerror = function (evt) { console.error("opendb:", evt.target.errorcode); }; req.onupgradeneeded = fu...
Intersection Observer API - Web APIs
intersection information is needed for many reasons, such as: lazy-loading of images or other content as a page is scrolled.
... we call window.addeventlistener() to start listening for the load event; once the page has finished loading, we get a reference to the element with the id "box" using queryselector(), then call the createobserver() method we'll create in a moment to handle building and installing the intersection observer.
MediaKeySession - Web APIs
mediakeysession.load() returns a promise that resolves to a boolean value after loading data for a specified session object.
... mediakeysession.update() returns a promise after loading messages and licenses to the cdm.
Using Navigation Timing - Web APIs
for example, to measure the perceived loading time for a page: window.addeventlistener("load", function() { let now = new date().gettime(); let loadingtime = now - performance.timing.navigationstart; document.queryselector(".output").innertext = loadingtime + " ms"; }, false); this code, executed when the load event occurs, subtracts from the current time the time at which the navigation whose timing was recorded began (per...
...the new code looks like this: window.addeventlistener("load", function() { let now = new date().gettime(); let loadingtime = now - performance.timing.navigationstart; output = "load time: " + loadingtime + " ms<br/>"; output += "navigation type: "; switch(performance.navigation.type) { case performancenavigation.type_navigate: output += "navigation"; break; case performancenavigation.type_reload: output += "reload"; break; case performancenavigation.type_back_forw...
PaintWorklet - Web APIs
examples the following three examples go together to show creating, loading, and using a paintworklet.
... for(let x = 0; x < geom.width/size; x++) { const color = colors[(x + y) % colors.length]; ctx.beginpath(); ctx.fillstyle = color; ctx.rect(x * size, y * size, size, size); ctx.fill(); } } } } // register our class under a specific name registerpaint('checkerboard', checkerboardpainter); load a paintworklet the following example demonstrates loading the above worklet from its js file and does so by feature detection.
PerformanceResourceTiming - Web APIs
the performanceresourcetiming interface enables retrieval and analysis of detailed network timing data regarding the loading of an application's resources.
... the interface's properties create a resource loading timeline with high-resolution timestamps for network events such as redirect start and end times, fetch start, dns lookup start and end times, response start and end times, etc..
PerformanceTiming.domInteractive - Web APIs
this property can be used to measure the speed of loading web sites that users feels.
...check if you are in one of these cases before using this property as a proxy for the user experience of a web site's speed of loading.
ProgressEvent() - Web APIs
when downloading a resource using http, this only represent the part of the content itself, not headers and other overhead.
...when downloading a resource using http, this only represent the content itself, not headers and other overhead.
ProgressEvent.initProgressEvent() - Web APIs
when downloading a resource using http, this only represent the part of the content itself, not headers and other overhead.
...when downloading a resource using http, this only represent the content itself, not headers and other overhead.
Adding 2D content to a WebGL context - Web APIs
we're loading a copy from a cdn in our html's <head>.
... then we establish the position of the square plane by loading the identity position and translating away from the camera by 6 units.
Animating textures in WebGL - Web APIs
checking for both of these events guarantees there is data available and it's safe to start uploading video to a webgl texture.
... and finally, we set the src attribute to start and call play to start loading and playing the video.
Rendering and the WebXR frame animation callback - Web APIs
for these reasons, unless your renderer is fairly small and lightweight, with little to do, you should consider offloading everything you can to a worker so you can be computing the next frame while the browser handles other things.
...this technique works very well for a small number of objects, but because it has to re-bind all the data for each object twice (once for the left eye, and once for the right), you're spending a lot of time adjusting the state, uploading buffers and textures, and so forth.
Starting up and shutting down a WebXR session - Web APIs
your document needs to either have been loaded from the local drive (such as by using an url such as http://localhost/...), or using https when loading the page.
... similarly, the specific methodology you use for loading models and other information and setting up your webgl data—textures, vertex buffers, shaders, and so on—will vary a great deal depending on your needs, what if any frameworks you're using, and the like.
Using the Web Audio API - Web APIs
loading sound now, the audio context we've created needs some sound to play through it.
... <audio src="mycooltrack.mp3"></audio> note: if the sound file you're loading is held on a different domain you will need to use the crossorigin attribute; see cross origin resource sharing (cors) for more information.
Window: load event - Web APIs
WebAPIWindowload event
this is in contrast to domcontentloaded, which is fired as soon as the page dom has been loaded, without waiting for resources to finish loading.
... living standard this links to the section in the steps that are carried out at the end of loading a document.
Window: pageshow event - Web APIs
this includes: initially loading the page navigating to the page from another page in the same window or tab restoring a frozen page on mobile oses returning to the page using the browser's forward or back buttons during the initial page load, the pageshow event fires after the load event.
...try loading new pages into this tab, then navigating forward and backward through history, noting the events’ output to the log.</p> results specifications specification status comment html living standardthe definition of 'pageshow' in that specification.
Window.stop() - Web APIs
WebAPIWindowstop
the window.stop() stops further resource loading in the current browsing context, equivalent to the stop button in the browser.
... because of how scripts are executed, this method cannot interrupt its parent document's loading, but it will stop its images, new windows, and other still-loading objects.
XDomainRequest.onprogress - Web APIs
this method is called periodically as an event handler for progress events on xdomainrequests, so that code can monitor progress while loading content.
... once loading is complete, the xdomainrequest.onload event handler gets called.
XMLDocument.load() - Web APIs
WebAPIXMLDocumentload
as of at least gecko 1.9, this no longer supports cross-site loading of documents (use xmlhttprequest or fetch() instead).
...(to test this functionality, create the files on your local disk or on a webserver rather than loading the load.html file from the lxr-generated page, which will serve the text.xml file as html.) specifications old w3c working draft of the dom level 3 load & save module ...
HTML attribute reference - HTML: Hypertext Markup Language
download <a>, <area> indicates that the hyperlink is to be used for downloading a resource.
... loading <img>, <iframe> indicates if the element should be loaded lazily (loading="lazy") or loaded immediately (loading="eager").
Allowing cross-origin use of images and canvas - HTML: Hypertext Markup Language
to begin downloading the image, we create a new htmlimageelement object by using the image() constructor.
... the image is then configured to allow cross-origin downloading by setting its crossorigin attribute to "anonymous" (that is, allow non-authenticated downloading of the image cross-origin).
<iframe>: The Inline Frame element - HTML: Hypertext Markup Language
WebHTMLElementiframe
loading indicates how the browser should load the iframe: eager: load the iframe immediately, regardless if it is outside the visible viewport (this is the default value).
... lazy: defer loading of the iframe until it reaches a calculated distance from the viewport, as defined by the browser.
<picture>: The Picture element - HTML: Hypertext Markup Language
WebHTMLElementpicture
cropping or modifying images for different media conditions (for example, loading a simpler version of an image which has too many details, on smaller displays).
... saving bandwidth and speeding page load times by loading the most appropriate image for the viewer's display.
HTML: Hypertext Markup Language
WebHTML
by uploading content to the internet and linking it to pages created by other people, you become an active participant in the world wide web.
... 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.
HTTP conditional requests - HTTP
such requests can be useful to validate the content of a cache, and sparing a useless control, to verify the integrity of a document, like when resuming a download, or when preventing to lose updates when uploading or modifying a document on the server.
... integrity of a partial download partial downloading of files is a functionality of http that allows to resume previous operations, saving bandwidth and time, by keeping the already obtained information: a server supporting partial downloads broadcasts this by sending the accept-ranges header.
Cache-Control - HTTP
revalidation and reloading must-revalidate indicates that once a resource becomes stale, caches must not use their stale copy without successful validation on the origin server.
...this means http request occurs each time, but it can skip downloading http body if the content is valid.
Strict-Transport-Security - HTTP
preload optional see preloading strict transport security for details.
... preloading strict transport security google maintains an hsts preload service.
X-XSS-Protection - HTTP
the http x-xss-protection response header is a feature of internet explorer, chrome and safari that stops pages from loading when they detect reflected cross-site scripting (xss) attacks.
... example block pages from loading when they detect reflected xss attacks: x-xss-protection: 1; mode=block php header("x-xss-protection: 1; mode=block"); apache (.htaccess) <ifmodule mod_headers.c> header set x-xss-protection "1; mode=block" </ifmodule> nginx add_header "x-xss-protection" "1; mode=block"; specifications not part of any specifications or drafts.
Redirections in HTTP - HTTP
redirects accomplish numerous goals: temporary redirects during site maintenance or downtime permanent redirects to preserve existing links/bookmarks after changing the site's urls, progress pages when uploading a file, etc.
... javascript redirections redirections in javascript are performed by setting a url string to the window.location property, loading the new page: window.location = "https://example.com/"; like html redirections, this can't work on all resources, and obviously, this will only work on clients that execute javascript.
Promise.prototype.finally() - JavaScript
examples using finally let isloading = true; fetch(myrequest).then(function(response) { var contenttype = response.headers.get("content-type"); if(contenttype && contenttype.includes("application/json")) { return response.json(); } throw new typeerror("oops, we haven't got json!"); }) .then(function(json) { /* process your json further */ }) .catch(function(error) { console.error(error); /* this line can...
...when console = {} */ }) .finally(function() { isloading = false; }); please do not add polyfills on mdn pages.
import - JavaScript
the following are some reasons why you might need to use dynamic import: when importing statically significantly slows the loading of your code and there is a low likelihood that you will need the code you are importing, or you will not need it until a later time.
...the static form is preferable for loading initial dependencies, and can benefit more readily from static analysis tools and tree shaking.
background_color - Web app manifests
therefore background_color should match the background-color css property in the site’s stylesheet for a smooth transition between launching the web application and loading the site's content.
... note: the background_color member is only meant to improve the user experience while the main stylesheet is loading from the network or the storage media; it is not used by the user agent as the background-color css property when the progressive web app stylesheet is available.
Handling media support issues in web content - Web media technologies
however, there are ways to present an image in low quality while it's still loading.
... <img src="/images/stafff-photo-huge-progressive.jpg" alt="staff photo, taken in january of 1972"> when using a progressive image, the data is stored in such a way that the browser is able to render a low-quality representation of the image as soon as possible, then update the image as it loads—or after it's finished loading—to present it in full quality.
Mapping the width and height attributes of media container elements to their aspect-ratio - Web media technologies
jank problems when loading images in the olden days of web development, it was always seen as a good practice to add width and height attributes to your html <img> elements, so that when browsers first loaded the page, they could put a correctly-sized placeholder box in the layout for each image to appear in when it finally loads.
... a new way of sizing images before loading completes recognizing the problem, a wicg community group formed to propose an intrinsicsize attribute.
Critical rendering path - Web Performance
understanding crp web performance includes the server requests and responses, loading, scripting, rendering, layout, and the painting of the pixels to the screen.
...performance tips include 1) minimizing the number of critical resources by deferring their download, marking them as async, or eliminating them altogether, 2) optimizing the number of requests required along with the file size of each request, and 3) optimizing the order in which critical resources are loaded by prioritizing the downloading critical assets, shorten the critical path length.
Optimizing startup performance - Web Performance
porting issues once the initial loading is done and the app's main code starts to run, it's possible your app may necessarily be single-threaded,especially if it's a port.
... gpu factors compiling shaders and uploading textures to the gpu can take time, especially for really intricate games.
Introduction to progressive web apps - Progressive web apps (PWAs)
for example: a decrease in loading times after the app has been installed, thanks to caching with service workers, along with saving precious bandwidth and time.
... pwas have near-instantaneous loading (from the second visit).
Mobile first - Progressive web apps (PWAs)
conditional resource loading to actually implement responsive/adaptive designs, you will need to enlist a certain amount of conditional resource loading, again so that different devices can receive an optimal experience without having to shoulder the burden of many resources that they don't need.
...having it included in the "600 pixels or wider" media query means that narrow screen devices won't read that media query, so they will not waste their time and bandwidth downloading that image.
Contributor's Guide - Archive of obsolete content
unfortunately, javascript does not yet have native support for modules: it has to rely on the host application to provide it with functionality such as loading subscripts, and exporting/ importing names.
page-mod - Archive of obsolete content
od({ include: "*", contentscriptfile: data.url("eaten.js") }); the content script replaces the page contents, but restores the original contents when it receives detach: // eaten.js var oldinnerhtml = window.document.body.innerhtml; window.document.body.innerhtml = "eaten!"; self.port.on("detach", function() { window.document.body.innerhtml = oldinnerhtml; }); try running the add-on, loading some pages, and then disabling the add-on in the add-ons manager.
windows - Archive of obsolete content
windows.open({ url: "http://www.example.com", onopen: function(window) { // do stuff like listen for content // loading.
loader/sandbox - Archive of obsolete content
load scripts this module provides a limited api for loading scripts from local urls.
ui/frame - Archive of obsolete content
ready this event is emitted while a frame instance is being loaded, at the point where it becomes possible to interact with the frame although sub-resources may still be in the process of loading.
cfx to jpm - Archive of obsolete content
loading modules the jpm tool uses the same logic as node.js to determine how to resolve the argument to require().
Display a Popup - Archive of obsolete content
ou run jpm init index.js: the main add-on code, that creates the button and panel get-text.js: the content script that interacts with the panel content text-entry.html: the panel content itself, specified as html icon-16.png, icon-32.png, and icon-64.png: icons for the button in three different sizes the "index.js" looks like this: var data = require("sdk/self").data; // construct a panel, loading its content from the "text-entry.html" // file in the "data" directory, and loading the "get-text.js" script // into it.
Listen for Page Load - Archive of obsolete content
you can get notifications about new pages loading using the tabs module.
Modifying Web Pages Based on URL - Archive of obsolete content
mod.pagemod({ include: "*.org", contentscriptfile: self.data.url("my-script.js") }); or from firefox 34 onwards: // import the page-mod api var pagemod = require("sdk/page-mod"); // create a page-mod // it will run a script whenever a ".org" url is loaded // the script replaces the page contents with a message pagemod.pagemod({ include: "*.org", contentscriptfile: "./my-script.js" }); loading multiple content scripts you can load more than one script, and the scripts can interact directly with each other.
Unit Testing - Archive of obsolete content
if you're migrating test code from cfx to jpm, see the guide to migrating from cfx, in particular the section on loading modules from test code.
Add-on SDK - Archive of obsolete content
interact with the browser open web pages, listen for pages loading and list open pages.
Canvas code snippets - Archive of obsolete content
*() { var reader = new filereader; var blob = yield new promise(accept => canvas.toblob(accept, type, options)); reader.readasarraybuffer(blob); yield new promise(accept => { reader.onloadend = accept }); return yield os.file.writeatomic(path, new uint8array(reader.result), { tmppath: path + '.tmp' }); }); } loading a remote page onto a canvas element the following class first creates a hidden iframe element and attaches a listener to the frame's load event.
Forms related code snippets - Archive of obsolete content
image preview before upload the filereader.prototype.readasdataurl() method can be useful, for example, to get a preview of an image before uploading it.[article] this example shows how to use it in this way.
HTML to DOM - Archive of obsolete content
parsing complete html to dom loading an html document seems much simpler if it's loaded using the xmlhttprequest object.
Progress Listeners - Archive of obsolete content
progress listeners progress listeners allow extensions to be notified of events associated with documents loading in the browser and with tab switching events.
Communication between HTML and your extension - Archive of obsolete content
after the html component was update with the result of the ajax request, i created and dispatched the event like this: var event = document.createevent("events"); event.initevent("my-custom-event", true, true); document.body.dispatchevent(event); in the code of the extension that catches the loading of a new page i added this code: var doc = aevent.originaltarget; // doc is document that triggered "onload" event // do something with the loaded page.
Migrating raw components to add-ons - Archive of obsolete content
as you'll see, add-ons give you much more flexibility than simply loading a component, but in order to get started, all you'll need is your directory structure and install manifest.
Appendix: What you should know about open-source software licenses - Archive of obsolete content
duplicating software would be burning cd-rs or downloading from the internet (copying from server to client).
Chapter 3: Introduction to XUL—How to build a more intuitive UI - Archive of obsolete content
using the stop() method stops loading the page currently in the process of being opened.
Chapter 4: Using XPCOM—Implementing advanced processes - Archive of obsolete content
listing 21: loading a page by setting a referrer var browser = document.getelementbyid('browser'); var ioservice = components.classes['@mozilla.org/network/io-service;1'] .getservice(components.interfaces.nsiioservice); var referrer = ioservice.newuri('http://www.gihyo.co.jp/', null, null); browser.loaduri('http://www.gihyo.co.jp/magazines/sd', referrer); listing 22: loading a page with data trans...
Adding menus and submenus - Archive of obsolete content
it's best to show an item with a throbber image (see chrome://global/skin/icons/loading_16.png) so the user knows there's something going on, and asynchronously fill its contents.
JavaScript Object Management - Archive of obsolete content
the window has to finish loading before it can do any of these things.
XUL School Tutorial - Archive of obsolete content
nnecting to remote content handling preferences local storage advanced topics the box model xpcom objects observer notifications custom xul elements with xbl mozilla documentation roadmap useful mozilla community sites appendices appendix a: add-on performance appendix b: install and uninstall scripts appendix c: avoiding using eval in add-ons appendix d: loading scripts appendix e: dom building and html insertion appendix f: monitoring dom changes the xul school project was developed by appcoast (formerly glaxstar).
Setting up an extension development environment - Archive of obsolete content
changes to xul overlays will still require reloading of the document overlaid.
Signing an XPI - Archive of obsolete content
in the downloading certificate dialog, tick trust this ca to identify software developers.
Adding preferences to an extension - Archive of obsolete content
the first step is to add the context attribute to the status bar panel: <statusbar id="status-bar"> <statusbarpanel id="stockwatcher2" label="loading..." context="stockmenu" onclick="stockwatcher.refreshinformation()" /> </statusbar> now when the user clicks on the status bar panel, the stock information refreshes, but when they right-click on it, a context menu pops up.
cached - Archive of obsolete content
related events checking noupdate downloading progress cached updateready obsolete error ...
checking - Archive of obsolete content
related events checking noupdate downloading progress cached updateready obsolete error ...
noupdate - Archive of obsolete content
related events checking noupdate downloading progress cached updateready obsolete error ...
obsolete - Archive of obsolete content
related events checking noupdate downloading progress cached updateready obsolete error ...
updateready - Archive of obsolete content
related events checking noupdate downloading progress cached updateready obsolete error ...
Events - Archive of obsolete content
archived event pages domsubtreemodifiedmozaudioavailablemozbeforeresizemozorientationcachedchargingchangechargingtimechangecheckingdischargingtimechangedownloadingerrorlevelchangenoupdateobsoleteprogressupdateready ...
Localizing an extension - Archive of obsolete content
the stockwatcher2.dtd file contains the mappings for the stockwatcher2.xul file: <!entity panel_loading "loading..."> <!entity menu_refresh_now.label "refresh now"> <!entity menu_apple.label "apple (aapl)"> <!entity menu_google.label "google (goog)"> <!entity menu_microsoft.label "microsoft (msft)"> <!entity menu_yahoo.label "yahoo (yhoo)"> update the xul files each xul file needs to reference its corresponding locale file.
Kill the XUL.mfl file for good - Archive of obsolete content
loading these files from the server, and storing them back slows down the network, thus it may actually be faster without than with xul.mfl occasionnally gets corrupted, needing a manual intervention to wipe it out, before mozilla again works correctly.
Adding the structure - Archive of obsolete content
"done" in mozilla when a document finishes loading) and graphical messages (f.e.
Conclusion - Archive of obsolete content
to test it, try installing the extension on a fresh copy of mozilla by loading the file in your mozilla browser (this works whether you load it from the web or from your local hard drive via a file:/// url).
Enabling the behavior - retrieving tinderbox status - Archive of obsolete content
we use new to create a new instance of it, set the instance's onload property to updatetinderboxstatus(), the function we want to execute when the document finishes loading, call its open method with the type of http request we want to make and the url of the document to retrieve, and then call its send method to send the request.
Enabling the behavior - updating the status periodically - Archive of obsolete content
this allows users to get relatively frequent updates about tinderbox without overloading the tinderbox server or slowing down mozilla with requests.
Editor Embedding Guide - Archive of obsolete content
the first parameter is the nsidomwindow you just retrieved, the second is the editor type you want to create, and the third is whether you want the window editable immediately or when the document is done loading.
Using microformats - Archive of obsolete content
loading the microformats api the microformats object is created using the new javascript script loader added to firefox 3.
Firefox - Archive of obsolete content
downloading nightly or trunk buildsthere are some terms that are used by the mozilla community.
JavaScript Client API - Archive of obsolete content
w required identification conventions; and (e) that you and your third party client will not use the firefox sync apis for any application or service that replicates or attempts to replicate the services or firefox sync experience unless such use is non-confusing (by non-confusing, we mean that people should always know with whom they are dealing and where the information or software they are downloading came from).
Creating a Help Content Pack - Archive of obsolete content
however, while it may seem like this is a disadvantage, it's actually an advantage - if you make an error you'll know immediately, and you should be able to easily figure out what the problem is by directly loading the file in firefox.
Helper Apps (and a bit of Save As) - Archive of obsolete content
ongoing work support synchronous dialogs, not just asynchronous ones (fixes many issues related to pre-downloading, content-decoding, etc).
JavaScript crypto - Archive of obsolete content
*/); loading pkcs #11 modules long deletemodule(domstring modulename); long addmodule(domstring modulename, domstring libraryfullpath, long cryptomechanismflags, long cipherflags); loads or removes a new pkcs #11 module.
Metro browser chrome tests - Archive of obsolete content
a simple test looks like this: gtests.push({ desc: "test loading about:blank", setup: function () { }, teardown: function () { }, run: function () { yield addtab("about:blank"); is(tab.browser.currenturi.spec, "about:blank", "about:blank is loaded"); } }); function test() { runtests(); } gtests contains individual tests that make up the library of tests your test file will contain.
Mozilla Application Framework in Detail - Archive of obsolete content
mozilla's xml-rpc support includes synchronous and asynchronous requesting and downloading of data from a server.
New Security Model for Web Services - Archive of obsolete content
if an entry was not found in the cache creates one by loading the declaration file (web-scripts-access.xml) and extracting information from it (declaration file); requested type and subject princple's prefix are compared to the allowed type and prefix in order to determine access.
Overview of how downloads work - Archive of obsolete content
there are two ways of downloading files in mozilla.
Configuration - Archive of obsolete content
status turns the status messages on or off for this web app: yes or no location turns the readonly location bar on or off for this web app: yes or no navigation turns the hotkey history navigation (alt+left, alt+right and alt+home) on or off for this web app: yes or no splashscreen filename of an html page to be displayed while the app is loading.
HostWindow - Archive of obsolete content
status - area of the statusbar that displays the loading status message and a "percent complete" progress bar, as well as the "gear" menu that provides access to prism commands such as displaying the error console.
Prism - Archive of obsolete content
in addition to the browser engine included in xulrunner, it consists of: web app bundle management: code for creating new web app bundles and loading existing bundles.
Standalone XPCOM - Archive of obsolete content
./nstestsample: error in loading shared libraries: libxpcom.so: cannot open shared object file: no such file or directory ld_library_path not set.
Running Tamarin performance tests - Archive of obsolete content
- you may build the .abc files by downloading the latest asc.jar.
Tamarin Build System Documentation - Archive of obsolete content
the smoke test including downloading the shell takes about 3-4 minutes.
The Download Manager schema - Archive of obsolete content
autoresume integer 0 if the file should not automatically resume downloading, 1 if it should.
The life of an HTML HTTP request - Archive of obsolete content
(1) the loading of the url is started in nswebshell::doloadurl (called from some loadurl or loaduri variant in the webshell).
Tuning Pageload - Archive of obsolete content
firefox (and all mozilla products/projects which do page-loading) ship with what are considered the "best" settings for the most cases.
Writing textual data - Archive of obsolete content
var fin = converter.finish(); if (fin.length > 0) os.write(fin, fin.length); os.close(); converting a string into a stream sometimes, it is useful to convert a string into a stream, for example for uploading it using nsiuploadchannel.
Creating XPI Installer Modules - Archive of obsolete content
package creation overview this tutorial describes the following sequence of steps for creating a new package: developing the resources organizing the resources creating the contents.rdf file making the barley install script creating a xpi you can examine (or install!) the package described here by downloading the barley xpi file and using a zip unarchiver[zip] to open it.
Install Wizards (aka: Stub Installers) - Archive of obsolete content
(the stub installer accomplishes this by downloading the xpinstall engine along with the selected software packages.
Trigger Scripts and Install Scripts - Archive of obsolete content
a trigger script may trigger the downloading of a xpi, which in turn will use its own install.js script to manage the complete installation.
Install Object - Archive of obsolete content
install use the install object to manage the downloading and installation of software with the xpi installation manager.
XPJS Components Proposal - Archive of obsolete content
the xpjsmanager is in charge of loading these .js files, helping them register themselves, and acting as an intermediary between the xpcom component manager and the js code.
browser.type - Archive of obsolete content
chrome (default behaviour): a browser, intended to be used for loading privileged content using a chrome:// uri.
image.onload - Archive of obsolete content
« xul reference home image.onload type: script code this event handler will be called on the image element when the image has finished loading.
onerror - Archive of obsolete content
« xul reference home onerror type: script code this event is sent to an image element when an error occurs loading the image.
prefwindow.onload - Archive of obsolete content
« xul reference home prefwindow.onload type: script code when a window finishes loading, it calls this event handler on the prefwindow element.
XUL Events - Archive of obsolete content
this event may also be used on the image element, or an element that accepts an image attribute, and will be fired when the image has finished loading.
Accessing Files - Archive of obsolete content
file and stream guide: [ nsiscriptableio | accessing files | getting file information | reading from files | writing to files | moving, copying and deleting files | uploading and downloading files | working with directories ] important note: the pages from the file and stream guide use the io object (nsiscriptableio), which was not available in any released version of the platform (pending some fixes).
Working With Directories - Archive of obsolete content
file and stream guide: [ nsiscriptableio | accessing files | getting file information | reading from files | writing to files | moving, copying and deleting files | uploading and downloading files | working with directories ] important note: the pages from the file and stream guide use the io object (nsiscriptableio), which was not available in any released version of the platform (pending some fixes).
Getting File Information - Archive of obsolete content
file and stream guide: [ nsiscriptableio | accessing files | getting file information | reading from files | writing to files | moving, copying and deleting files | uploading and downloading files | working with directories ] important note: the pages from the file and stream guide use the io object (nsiscriptableio), which was not available in any released version of the platform (pending some fixes).
Reading from Files - Archive of obsolete content
file and stream guide: [ nsiscriptableio | accessing files | getting file information | reading from files | writing to files | moving, copying and deleting files | uploading and downloading files | working with directories ] important note: the pages from the file and stream guide use the io object (nsiscriptableio), which was not available in any released version of the platform (pending some fixes).
Writing to Files - Archive of obsolete content
file and stream guide: [ nsiscriptableio | accessing files | getting file information | reading from files | writing to files | moving, copying and deleting files | uploading and downloading files | working with directories ] important note: the pages from the file and stream guide use the io object (nsiscriptableio), which was not available in any released version of the platform (pending some fixes).
Moving, Copying and Deleting Files - Archive of obsolete content
file and stream guide: [ nsiscriptableio | accessing files | getting file information | reading from files | writing to files | moving, copying and deleting files | uploading and downloading files | working with directories ] important note: the pages from the file and stream guide use the io object (nsiscriptableio), which was not available in any released version of the platform (pending some fixes).
TOC - Archive of obsolete content
ArchiveMozillaXULFileGuideTOC
file and stream guide: [ nsiscriptableio | accessing files | getting file information | reading from files | writing to files | moving, copying and deleting files | uploading and downloading files | working with directories ] important note: the pages from the file and stream guide use the io object (nsiscriptableio), which was not available in any released version of the platform (pending some fixes).
Menus - Archive of obsolete content
images context-sendimage sends an image in an email images context-setdesktopbackground sets an image as the desktop background images context-blockimage blocks an image images context-back goes back a page context-forward goes forward a page context-reload reloads a page context-stop stops loading a page context-bookmarkpage bookmarks a page context-savepage saves a page context-sendpagetodevice send page to device context-sendpage send page in an email context-viewbgimage views a background image context-undo undo editable text context-cut cuts to clipboard editable text...
stop - Archive of obsolete content
ArchiveMozillaXULMethodstop
« xul reference home stop() return type: no return value equivalent to pressing the stop button, this method stops the currently loading document.
webProgress - Archive of obsolete content
« xul reference webprogress type: nsiwebprogress this read-only property contains an nsiwebprogress object which is used to monitor the progress of a document loading.
Sorting and filtering a custom tree view - Archive of obsolete content
this is useful if this is an editable table //to prevent the user from losing the row they edited var topvisiblerow = null; if (table) { topvisiblerow = gettopvisiblerow(); } if (data == null) { //put object loading code here.
Introduction - Archive of obsolete content
the rdf service starts the loading of the datasource in the background, and the template builder goes through the process of building content anyway.
Rule Compilation - Archive of obsolete content
ref="http://www.xulplanet.com/rdf/a" flex="1"> <template> <query> -- query content goes here -- </query> <rule> -- rule content goes here -- </rule> <rule> -- rule content goes here -- </rule> </template> </vbox> query/rule compilation and lazy content generation when the template builder starts processing, and after it has started the datasource loading, it first must compile the query and rules.
Static Content - Archive of obsolete content
note that the workaround of loading the datasource beforehand as mentioned for the last example isn't necessary, as the existence of the static content is another effective workaround.
Template Builder Interface - Archive of obsolete content
this is convenient when you want to simply add a new datasource to an existing template without reloading existing data.
Complete - Archive of obsolete content
xul and javascript each have mechanisms for loading text strings from the correct locale directory.
Adding Methods to XBL-defined Elements - Archive of obsolete content
it is used to initialize the content such as loading preferences or setting the default values of fields.
More Event Handlers - Archive of obsolete content
load events the load event is sent to the document (the window tag) once the xul file has finished loading and just before the content is displayed.
Progress Meters - Archive of obsolete content
you typically see it when downloading files or when performing a lengthy operation.
Skinning XUL Files by Hand - Archive of obsolete content
loading stylesheets in xul for your custom skin, let's assume you want to skin the xul file, xulnote_sample1.xul.
Using Remote XUL - Archive of obsolete content
[optionally add something about how flex only applies to one axis] note that for remote xul documents you can see changes you make to the ui by reloading the document with your browser's "reload" function, just as with a typical html page.
XUL Changes for Firefox 1.5 - Archive of obsolete content
loading overlays dynamically xul now supports loading overlays dynamically with the document.loadoverlay function.
XUL accessibility guidelines - Archive of obsolete content
--> <toolbarbutton label="stop" image="stop.png" tooltiptext="stop loading the page" /> title provide unique titles to window container elements such as windows, wizards, and dialogs.
iframe - Archive of obsolete content
chrome (default behaviour): a browser, intended to be used for loading privileged content using a chrome:// uri.
prefwindow - Archive of obsolete content
prefwindow.onload type: script code when a window finishes loading, it calls this event handler on the prefwindow element.
progressmeter - Archive of obsolete content
attributes max, mode, value properties accessibletype, max, mode, value examples <progressmeter mode="determined" value="82"/> <progressmeter mode="undetermined"/> <!-- switching modes while the mouse is over a button --> <progressmeter mode="determined" id="myprogress"/> <button label="example" onmouseover="setloading(true)" onmouseout="setloading(false)"/> function setloading(state){ document.getelementbyid('myprogress').mode = (state) ?
Creating XULRunner Apps with the Mozilla Build System - Archive of obsolete content
if you are just creating a xulrunner app with some c++ components, you can avoid the challenge of building xulrunner itself by downloading a prebuilt sdk.
Deploying XULRunner - Archive of obsolete content
(bonus points for checking the operating system and downloading the right xulrunner on the fly, or bundling them into your installer).
Mozilla.dev.apps.firefox-2006-10-06 - Archive of obsolete content
reload from cache discussion regarding the lack of user understanding regarding reloading and reloading from the cache and how to address it.
2006-10-06 - Archive of obsolete content
reload from cache discussion regarding the lack of user understanding regarding reloading and reloading from the cache and how to address it.
2006-10-20 - Archive of obsolete content
he can be contacted via: email: preed@mozilla.com irc: preed on irc.mozilla.org phone: 650.903.0800 x256 uploading language packs to amo on october 17th benjamin smedberg brought the following to the attention of the localizers and the build team: that he is planning to upload the firefox 2 language packages currently located at http://releases.mozilla.org/pub/mozi...rc3/win32/xpi/ to addons.mozilla.org in the next few days.
2006-10-20 - Archive of obsolete content
uploading language packs to amo benjamin smedberg is ready to upload languange packs from here to addons.mozilla.org.
2006-12-08 - Archive of obsolete content
seamonkey 1.1b es-es language and region packs language and region packs for seamonkey 1.1b is ready for downloading.
2006-12-01 - Archive of obsolete content
problem with downloading signed script components in a firefox extension andrew groom is having problems getting an extension to download a signed script and would appreciates some help with his problem.
JS-Engine FAQ - Archive of obsolete content
spidermonkey library loading mechanism?
2006-11-17 - Archive of obsolete content
site not loading with seamonkey a user built seamonkey in debug mode and is currently receiving a "bad request" error on some websites.
2006-09-06 - Archive of obsolete content
how to build xpcom component on mac os x a tutorial on how to build xpcom component on mac os x firefox crashes when calling a function provided by a .so library a solution to the problem loading a shared library when using xpcom firefoxes crashes while getting url in xpcom solutions to resolve the problem of the firefox crash when trying to get the path and the prepath of the url of the current page in xpcom meetings none during this week.
2006-09-30 - Archive of obsolete content
developers should use this sample instead: http://developer.mozilla.org/en/docs/xpcom_glue discussions dynamic load overlay a short discussion about the possibilities of loading and unloading xul overlay runtime reading binary data from file discusses about the code to read binary data from file how to build xpcom component on mac os x discusses about the make file code used to build xpcom components on mac os x successfully meetings none during this week.
NPAPI plugin developer guide - Archive of obsolete content
out how much data the plug-in can accept writing the stream to the plug-in sending the stream in random-access mode sending the stream in file mode sending a stream creating a stream pushing data into the stream deleting the stream example of sending a stream urls getting urls getting the url and displaying the page posting urls posting data to an http server uploading files to an ftp server sending mail memory allocating and freeing memory mac os flushing memory (mac os only) version, ui, and status information displaying a status line message getting agent information getting the current version finding out if a feature exists reloading a plug-in ...
NPByteRange - Archive of obsolete content
the only plug-in api call that uses the npbyterange type is npn_requestread(), which lets the plug-in read specified parts of a file without downloading it.
NPN_GetURLNotify - Archive of obsolete content
for requests that complete successfully: if the target is non-null, the browser calls npp_urlnotify() after it has finished loading the url.
NP_Shutdown - Archive of obsolete content
syntax #include <npapi.h> void np_shutdown(void); windows #include <npapi.h> void winapi np_shutdown(void); description the browser calls this function once after the last instance of your plug-in is destroyed, before unloading the plug-in library itself.
Table Reflow Internals - Archive of obsolete content
overview review of reflow table frames table reflow intro to paginated reflow table paginated reflow review of reflow reflow process starts when an html document starts loading (the frame tree contains only viewport, scroll(s), canvas, html, body).
Making sure your theme works with RTL locales - Archive of obsolete content
order-start-color -moz-border-start-style -moz-border-start-width -moz-border-end -moz-border-end-color -moz-border-end-style -moz-border-end-width #urlbar-search-splitter { min-width: 8px; -moz-margin-start: -4px; border: none; background: transparent; } testing your theme testing your theme for rtl compatibility is easy, and you do not even have to go through the hassle of downloading a rtl locale.
Theme changes in Firefox 3 - Archive of obsolete content
image changes chrome://global/skin/icons/loading_16.gif was replaced with chrome://global/skin/icons/loading_16.png .
Date.prototype.toLocaleFormat() - Archive of obsolete content
extension and xulrunner developers should know that just loading the format string from a .dtd or .properties file using a chrome://somedomain/locale/somefile.ext uri should be avoided, as the .dtd/.properties file and the tolocaleformat() method does not not necessarily use the same locale, which could result in odd looking or even ambiguous or unreadable dates.
LiveConnect - Archive of obsolete content
old liveconnect documents, broken links: java method overloading and liveconnect 3 the technique that liveconnect uses to invoke overloaded java methods from javascript.
Reference - Archive of obsolete content
if downloading the stuff is your priority you are free to field ideas/concept to the devmo mailing list for discussion, and then actually code it (or find someone to do so).
Common causes of memory leaks in extensions - Extensions
unload(function() window.removeeventlistener("leaky", leakref, true), window); } note: the unload() function is an external function which can be added in your add-on to easily provide a way to undo changes upon unloading of your add-on or a specific part/object.
Index - Game development
in gecko, async compilation allows the javascript engine to compile the asm.js off the main thread when the game is loading and cache the generated machine code so that the game doesn't need to be compiled on subsequent loads (starting in firefox 28).
Introduction to game development for the Web - Game development
this is a great way to do anything from downloading new game levels and artwork to transmitting non-real-time game status information back and forth.
Game monetization - Game development
video ads are getting more and more popular, especially in the form of a pre-roll — they are shown at the beginning of your game while it's still loading.
Building up a basic demo with PlayCanvas - Game development
playcanvas engine built for modern browsers, playcanvas is a fully-featured 3d game engine with resource loading, an entity and component system, advanced graphics manipulation, collision and physics engine (built with ammo.js), audio, and facilities to handle control inputs from various devices (including gamepads).
Async scripts for asm.js - Game development
in gecko, async compilation allows the javascript engine to compile the asm.js off the main thread when the game is loading and cache the generated machine code so that the game doesn't need to be compiled on subsequent loads (starting in firefox 28).
Implementing game control mechanisms - Game development
the first one is needed for preloading required assets, create() is executed once the state had started, and update() is executed on every frame.
Game over - Game development
for now we'll keep it simple, showing an alert message and restarting the game by reloading the page.
Bounce off the walls - Game development
add the following line below the previous one: ball.body.bounce.set(1); try reloading index.html again — now you should see the ball bouncing off all the walls and moving inside the canvas area.
Buttons - Game development
add these lines below your other variable definitions: var playing = false; var startbutton; loading the button spritesheet we can load the button spritesheet the same way we loaded the ball's wobble animation.
Load the assets and print them on screen - Game development
loading the ball sprite loading images and printing them on our canvas is a lot easier using phaser than using pure javascript.
Physics - Game development
alignhorizontally = 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.arcade); ball.body.velocity.set(150, 150); } function update() { } try reloading index.html again — the ball should now be moving constantly in the given direction.
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() { // ...
Ajax - MDN Web Docs Glossary: Definitions of Web-related terms
ajax also lets you work asynchronously, meaning your code continues to run while the targeted part of your web page is trying to reload (compared to synchronously, which blocks your code from running until that part of your page is done reloading).
FTP - MDN Web Docs Glossary: Definitions of Web-related terms
learn more general knowledge beginner's guide to uploading files via ftp ftp on wikipedia ...
First contentful paint - MDN Web Docs Glossary: Definitions of Web-related terms
first contentful paint (fcp) is when the browser renders the first bit of content from the dom, providing the first feedback to the user that the page is actually loading.
First input delay - MDN Web Docs Glossary: Definitions of Web-related terms
see also requestidlecallback lazy loading ...
Netscape Navigator - MDN Web Docs Glossary: Definitions of Web-related terms
netscape could display a webpage while loading, used javascript for forms and interactive content, and stored session information in cookies.
Page prediction - MDN Web Docs Glossary: Definitions of Web-related terms
page prediction improves performance by enabling almost instant loading of predicted content.
Prefetch - MDN Web Docs Glossary: Definitions of Web-related terms
<link rel="dns-prefetch" href="https://example.com/"> link prefetching link prefetching is a performance optimization technique that works by assuming which links the user is likely to click, then downloading the content of those links.
SPA (Single-page application) - MDN Web Docs Glossary: Definitions of Web-related terms
this therefore allows users to use websites without loading whole new pages from the server, which can result in performance gains and a more dynamic experience, with some tradeoff disadvantages such as seo, more effort required to maintain state, implement navigation, and do meaningful performance monitoring.
Speculative parsing - MDN Web Docs Glossary: Definitions of Web-related terms
this document helps you avoid the kind of things that make speculation fail and slow down the loading of your page.
HTML: A good basis for accessibility - Learn web development
these values cause unexpected behavior when copying or dragging links, opening links in a new tab or window, bookmarking, and when javascript is still downloading, errors out, or is disabled.
HTML: A good basis for accessibility - Learn web development
these values cause unexpected behavior when copying or dragging links, opening links in a new tab or window, bookmarking, and when javascript is still downloading, errors out, or is disabled.
Mobile accessibility - Learn web development
see html5-form-examples.html for some examples (see the html5 form examples live) — try loading these and manipulating them on mobile devices.
Accessible multimedia - Learn web development
as well as giving deaf users access to the information contained in the audio, think about a user with a low bandwidth connection, who would find downloading the audio inconvenient.
Debugging CSS - Learn web development
devtools can save you a lot of time editing a stylesheet and reloading the page.
Sizing items in CSS - Learn web development
downloading overly large images will cause your site to become slow, and it can cost users more money if they are on a metered connection.
Multiple-column layout - Learn web development
you can follow along by downloading the multicol starting point file and adding the css into the appropriate places.
Practical positioning examples - Learn web development
styling our tabs now we want to style tabs to look like tabs — basically, these are a horizontal navigation menu, but instead of loading different web pages when they are clicked on like we've seen previously in the course, they cause different panels to be displayed on the same page.
Responsive design - Learn web development
the image might be displayed a lot smaller than its intrinsic size, which is a waste of bandwidth — a mobile user may be downloading an image several times the size of what they actually see in the browser window.
How do you upload your files to a web server? - Learn web development
uploading to the server our example host instructions told us "to publish on the web, put your files into the public/htdocs directory." you need to navigate to the specified directory in your right pane.
What are hyperlinks? - Learn web development
when you follow a link pointing to an anchor, your browser jumps to another part of the current document instead of loading a new document.
Sending form data - Learn web development
the server then responds, generally handling the data and loading the url defined by the action attribute, causing a new page load (or a refresh of the existing page, if the action points to the same page).
UI pseudo-classes - Learn web development
now finally, we've used some javascript to toggle the disabling of the billing address fields: // wait for the page to finish loading document.addeventlistener('domcontentloaded', function () { // attach `change` event listener to checkbox document.getelementbyid('billing-checkbox').addeventlistener('change', togglebilling); }, false); function togglebilling() { // select the billing text fields let billingitems = document.queryselectorall('#billing input[type="text"]'); // select the billing text labels let billi...
JavaScript basics - Learn web development
to learn more about alternative approaches, see script loading strategies.
Use HTML to solve common problems - Learn web development
LearnHTMLHowto
how to add multiple languages into a single webpage how to display time and date with html performance how to author fast-loading html pages ...
Video and audio content - Learn web development
autoplay makes the audio or video start playing right away, while the rest of the page is loading.
Introducing asynchronous JavaScript - Learn web development
in this case the callback is waiting on the xhr call to finish downloading the resource (using the onload event handler) before it passes it to the callback.
Graceful asynchronous programming with Promises - Learn web development
add this now: let errorcase = promise3.catch(e => { console.log('there has been a problem with your fetch operation: ' + e.message); }); to see this in action, try misspelling the url to the image and reloading the page.
Build your own function - Learn web development
if you try changing the line to btn.onclick = displaymessage(); and saving and reloading, you'll see that the message box appears without the button being clicked!
Introduction to events - Learn web development
a web page finishes loading.
Test your skills: Loops - Learn web development
note: you can try out solutions for the tasks below by downloading the code, putting it in an online tool such as codepen, jsfiddle, or glitch, then working on the tasks.
A first splash into JavaScript - Learn web development
events are things that happen in the browser — a button being clicked, a page loading, a video playing, etc.
Adding features to our bouncing balls demo - Learn web development
at this point, try reloading the code — it should work just the same as it did before, with our redesigned objects.
Inheritance in JavaScript - Learn web development
try saving your code, loading the page in a browser, and entering teacher.prototype.constructor into the console to verify.
Working with JSON - Learn web development
try loading this up and then accessing data inside the variable via your browser's javascript console.
Measuring performance - Learn web development
performance entries are also created in indirect ways; such as loading a resource, like an image.
Website security - Learn web development
the requests may simply be numerous, or they may individually consume large amounts of resource (e.g., slow reads or uploading of large files).
Introduction to client-side frameworks - Learn web development
with client-side routing, your browser is not loading new web pages, so it doesn't know that it should automatically adjust focus or announce a new page title.
TypeScript support in Svelte - Learn web development
let's start by running the validate script in watch mode inside your project root: npm run validate -- --watch this should output something like the following: svelte-check "--watch" loading svelte-check in workspace: ./svelte-todo-typescript getting svelte diagnostics...
Working with Svelte stores - Learn web development
moreover, because web storage only supports saving string values, we will have to convert from string to object when saving, and vice versa when we are loading the value from local storage.
Creating our first Vue component - Learn web development
<template> <div id="app"> <h1>my to-do list</h1> <ul> <li> <to-do-item label="my todo item" :done="true"></to-do-item> </li> </ul> </div> </template> try changing true to false and back again, reloading your app in between to see how the state changes.
Implementing feature detection - Learn web development
<script src="modernizr-custom.js"></script> now edit your opening <html> tag, so that it looks like this: <html class="no-js"> at this point, try loading your page, and you'll get an idea of how modernizr works for css features.
Handling common HTML and CSS problems - Learn web development
after the packages have finished installing, try loading up an html file and a css file: you'll see any issues highlighted with green (for warnings) and red (for errors) circles next to the line numbers, and a separate panel at the bottom provides line numbers, error messages, and sometimes suggested values or other fixes.
Setting up your own test automation environment - Learn web development
for example if you load a new page, you'll want to wait for the page's dom to finish loading before you try to interact with any of its elements, otherwise the test will likely fail.
Command line crash course - Learn web development
install npm on your system now, by going to the url above and downloading an running a node.js installer appropriate to your operating system.
Introducing a complete toolchain - Learn web development
parcel will watch the code and run a live-reloading web server during development.
Chrome Worker Modules
loading modules loading a module is simple.
Accessibility/LiveRegionDevGuide
these "non-live" events may be events originating from the chrome, user interaction in the chrome or document, document loading events, or real live region events from hidden tabs.
Mozilla’s UAAG evaluation report
(p3) vg a progress bar and status bar message indicates loading progress the scroll bar indicates how far into the document the current graphical view is the size of the current document is in the page info screen, sometimes it says unavailable guideline 11.
Theme concepts
if you are uploading a packaged file, the version number must be higher than the current version number dynamic themes as an alternative to defining a static theme, you can use the theme api to control the theme used in firefox from within a browser extension.
Add-ons
by uploading your add-on to amo, you can participate in our community of users and creators and find an audience for your add-on.
Command line options
this can be used to suppress the migration wizard at startup by loading the following override.ini.
Debugging Frame Reflow
on mac this is accomplished with: $ env dyld_library_path="`pwd`/obj-ff-dbg/dist/nightlydebug.app/contents/macos" \ ./obj-ff-dbg/dist/nightlydebug.app/contents/macos/firefox-bin > logfile.txt after loading your testcase, the log file will contain the promised information.
Debugging on Mac OS X
at this time, developers can obtain a hardened runtime build with the com.apple.security.get-task-allow entitlement allowed by submitting a try build and downloading the dmg generated by the "rpk" shippable build job.
Listening to events on all tabs
it might also be called if an error occurs during network loading.
Experimental features in Firefox
read preloading content with rel="preload" for more details.
Limitations of chrome scripts
you can do this by loading a frame script or, with the add-on sdk, you can use remoterequire() in the "remote/parent" module.
Message manager
guides message manager overview frame script loading and lifetime communicating with frame scripts performance best practices frame script environment limitations of frame scripts process scripts api reference nsiframescriptloader nsimessagelistenermanager nsimessagebroadcaster nsimessagesender nsisyncmessagesender nsicontentframemessagemanager nsiprocessscriptloader ...
Message manager overview
script let childprocessmessagemanager = cc["@mozilla.org/childprocessmessagemanager;1"] .getservice(ci.nsisyncmessagesender); parent process message manager the parent process message manager lives in the implements nsimessagelistenermanager nsimessagebroadcaster child process message manager implements nsimessagelistenermanager nsimessagesender loading scripts per child process since the process message managers do not support script loading the only way to implement per-child process code is to use a frame script which imports a custom javascript module (jsm).
Performance best practices for Firefox front-end engineers
consider loading scripts with the subscript loader asynchronously if you've ever used the subscript loader, you might not know that it can load scripts asynchronously, and return a promise once they're loaded.
HTMLIFrameElement.getStructuredData()
examples var browser = document.queryselector('iframe'); browser.addeventlistener('mozbrowserloadend',function() { var request = browser.getstructureddata(); request.onsuccess = function() { console.log(request.result); } }); running this code in a browser api app and then loading up a page that contains microdata (such as the website of british alt-country band salter cane) will result in a json object being returned, along the lines of: { "items": [ { "type":["http://microformats.org/profile/hcard"], "properties":{"fn":["chris askew"], "n":[ { "properties": { "given-name":["chris"], ...
mozbrowserloadstart
this can be used when the embedder wants to start spinning a loading indicator, or update the ui in some other way to indicate loading has started.
mozbrowserscrollareachanged
this can occur on resize and when the page size changes (while loading for example.) general info specification non standard interface customevent bubbles yes cancelable yes target <iframe> default action none properties property type description target read only eventtarget the browser iframe type read only domstring the type of event.
HTMLIFrameElement.stop()
MozillaGeckoChromeAPIBrowser APIstop
the stop() method of the htmliframeelement interface is used to stop loading the content of the <iframe>.
Embedding the editor
(this would be analogous to the nsiwebnavigation interface used for a browser.) when we have one editor per docshell, loading a frameset document, or a page with an <iframe> in composer, will instantiate more than one low-level editor.
Embedding Tips
this interface also has methods for reloading, stopping a load and going back and forward in the history.
Roll your own browser: An embedding how-to
fast ie-look-alike browser, uses ie and ns bookmarking system, fast loading time, privacy features, java support and complete control of the menus and "hotkeys".
Getting Started with Chat
the following are some other options available to you: windows mac linux colloquy ● irssi ● ● ●* xchat ● ○ ● key: ● — binary or executable program available ○ — only available by downloading and compiling source code ●* — binary or executable may be available.
PBackground
for example, when we are uploading textures from the content process we don't need to go through the main thread of the parent process.
Implementing Download Resuming
here, too, the front-end may want to offer downloading the entire file from scratch.
AddonUpdateChecker
error_download_error there was an error while downloading the update information.
DownloadTarget
for downloads of multiple files, such as downloading a web page and its required media to disk, the meaning of this property is undefined.
Promise.jsm
while you may still import this module from the above paths, the recommended way for loading it is through the add-on sdk loader.
Using JavaScript code modules
unloading code modules requires gecko 7.0(firefox 7.0 / thunderbird 7.0 / seamonkey 2.4) components.utils.unload() allows you to unload a previously imported code module.
JavaScript code modules
downloads.jsm provides a single entry point to interact with the downloading capabilities of the platform.
Bootstrapping a new locale
if you're downloading a new release of firefox from cvs, you might want to run configure again, too.
Localizing with Mercurial
you can install mercurial via macports through the terminal, like so: $ sudo port install mercurial you can also install it by downloading the dmg package from the hg download page.
Localizing with Pontoon
user menu allows for user-specific tasks, like commiting to repository, downloading files and signing out.
Mozilla Development Tools
if you are doing active development, checking out source code from one of these is preferable to downloading an archived snapshot, as you get up-to-the-minute changes.
Mozilla Style System Documentation
css stylesheet backend css stylesheet loading [this section needs to be written.
Profiling with Xperf
(note that it's not the first version number in the about window; that's the windows version.) if you have an older version, you will experience bugs, especially around symbol loading for local builds.
Reporting a Performance Problem
before uploading, the publish button asks you what data you'd like to publish to our servers.
nglayout.debug.disable_xul_cache
to improve performance, mozilla caches chrome xul documents the first time they load for faster loading later.
Preference reference
the old behavior can be restored by setting the preference mail.tabs.drawintitlebar to false.nglayout.debug.disable xul fastloadthe preference nglayout.debug.disable_xul_fastload controls whether or not xul fastload is used.nglayout.debug.disable_xul_cacheto improve performance, mozilla caches chrome xul documents the first time they load for faster loading later.
Profile Manager
downloading binaries you can download profile manager builds from https://ftp.mozilla.org/pub/mozilla.org/utilities/profilemanager/1.0/ note: there is no installer; just extract the files from the archive.
About NSPR
linking support for linking (shared library loading and unloading) is part of nspr's feature set.
Dynamic Library Linking
platform notes to use the dynamic library loading functions on some platforms, certain environment variables must be set at run time, and you may need to link your executable programs using special linker options.
PR_LoadLibrary
the function suppresses duplicate loading if the library is already known by the runtime.
JSS
MozillaProjectsNSSJSS
for information on downloading nss releases, see nss sources building testing.
NSS 3.12.6 release notes
arnings in nss 3.12.4 bug 518255: the input buffer for sgn_update should be declared const bug 519550: allow the specification of an alternate library for sqlite bug 524167: crash in [[@ find_objects_by_template - nsstoken_findcertificatebyissuerandserialnumber] bug 526910: maxresponselength (initialized to pkix_default_max_response_length) is too small for downloading some crls.
NSS 3.16.2 release notes
the certutil commands supports generic certificate extensions, by loading binary data from files, which have been prepared using external tools, or which have been extracted and dumped to file from other existing certificates: --dump-ext-val oid --extgeneric oid:critical-flag:filename[,oid:critical-flag:filename]...
NSS Sample Code Sample1
int importkeys(secitem *wrappedenckey, secitem *wrappedmackey); // start the server, loading the encryption and macing keys // from files int start(); // shut down the server.
PKCS11 Implement
c_logout the nss calls c_logout on a token's initial session when the password is timed out when performing any kind of private key operation if "ask always" is turned on when changing a password when the user logs out object management c_createobject the nss calls c_createobject when loading new private keys and new certificates into a token.
Python binding for NSS
for information on downloading python-nss releases as tar files, see source download.
NSS_Initialize
nss_init_pk11reload - ignore the ckr_cryptoki_already_initialized error when loading pkcs#11 modules.
NSS environment variables
nss_memory_allocation 3.4 nss_disable_unload string (any non-empty value) disable unloading of dynamically loaded nss shared libraries during shutdown.
NSS tools : modutil
(this information can be edited by loading new specs using the -rawadd command.) modutil -rawlist -dbdir sql:/home/my/sharednssdb name="nss internal pkcs #11 module" parameters="configdir=.
NSS Tools
for information about downloading the nss source, see https://developer.mozilla.org/nss/building.
certutil
listing security modules the devices that can be used to store certificates -- both internal databases and external devices like smart cards -- are recognized and used by loading security modules.
NSS tools : modutil
MozillaProjectsNSStoolsmodutil
(this information can be edited by loading new specs using the -rawadd command.) modutil -rawlist -dbdir sql:/home/my/sharednssdb name="nss internal pkcs #11 module" parameters="configdir=.
Necko Architecture
because a uri has no self knowledge about what "protocol" it represents, another component is responsible for deciding which channel implementation will be responsible for "loading" the uri.
Multithreading in Necko
the file transport is confusingly named since it is not restricted to loading files.
Renaming With Pork
typically they require loading the entire project into an ide.
Rhino scopes and contexts
these objects would normally be lazy loaded but the lazy loading fails if the scope is sealed.
Scripting Java
hod g with two integers we get an error because neither form of the method is closer to the argument types than the other: js> o.g(3,4) js:"<stdin>", line 2: the choice of java method overload.g matching javascript argument types (number,number) is ambiguous; candidate methods are: class java.lang.string g(java.lang.string,int) class java.lang.string g(int,java.lang.string) see java method overloading and liveconnect 3 for a more precise definition of overloading semantics.
Rhino serialization
this isn't that interesting an example since compiling a function to a class and then loading it accomplishes the same as serializing an interpreted function, but it becomes more relevant if you wish to serialize javascript objects that have references to compiled functions.
Rebranding SpiderMonkey (1.8.5)
after installing the build pre-requisites and downloading the spidermonkey source tarball issue the following commands at the terminal: cd js/src autoconf-2.13 for the remainder of this document wherever you see the text $brand you will substitute that text with the name of your brand.
SpiderMonkey Build Documentation
ing your local nspr has been installed to c:/mozilla-build/msys/local: /bin/sh ../configure.in --with-nspr-cflags="-ic:/mozilla-build/msys/local/include" \ --with-nspr-libs="c:/mozilla-build/msys/local/lib/libnspr4.a \ c:/mozilla-build/msys/local/lib/libplds4.a \ c:/mozilla-build/msys/local/lib/libplc4.a" if you get symbol loading or dynamic library errors, you can force the correct nspr to load with: path="$path;c:/mozilla-build/msys/local/lib/" ./js specifying installation directories make install puts files in the following directories by default.
Future directions
no fundamental blockers currently exist, but ctypes is still using nspr's runtime library loading facilities.
Getting SpiderMonkey source code
downloading gzipped spidermonkey source code you can download gzipped spidermonkey source code from the following urls: http://ftp.mozilla.org/pub/spidermonkey/releases/ http://ftp.mozilla.org/pub/spidermonkey/prereleases/ here is a command-line example of downloading and unzipping spidermonkey source code version 59.0: mkdir mozilla cd mozilla wget http://ftp.mozilla.org/pub/spidermonkey/prereleases/59/pre1/mozjs-59.0a1.0.tar.bz2 tar xvf mozjs-59.0a1.0.tar.bz2 these commands should work on most platforms including windows, as long as on windows you are using the mozillabuild bash shell.
Hacking Tips
this is because firefox doesn't allow loading files from the harddisk using httprequest, even when the file loading the file is on the harddisk.
64-bit Compatibility
loading and storing native integers the harder cases to detect usually involve runtime value truncation.
Introduction to the JavaScript shell
note: for loading non-javascript files, use read().
JS_AddExternalStringFinalizer
in a js_threadsafe build, this function must be invoked on the primordial thread only, at startup—or else the entire program must single-thread itself while loading a module that calls this function.
JS_DecompileScript
if the script is not cached, it tries to load the source from file, and returns nullptr if an error happened while loading.
WebReplayRoadmap
without time travel, using the console requires repeatedly updating the source or the debugger's log points, reloading, and reproducing the bug.
Mozinfo
downloading the software and running python setup.py develop will allow you to do import mozinfo from python.
Using the Places history service
this can be and is calledbefore the page is actually added to history, since the page isn't added until it actually starts loading.
Using the Places livemark service
note: the caller is responsible for reloading the livemark after changing its feed uri (since the contents are likely to be different given a different feed).
XPCOM glue
MozillaTechXPCOMGlue
this linkage strategy is used when an embedder needs to bootstrap xpcom by finding a compatible gre on disk and loading it.
An Overview of XPCOM
but xpcom also provides several tools and libraries that enable the loading and manipulation of these components, services that help the developer write modular cross-platform code, and versioning support, so that components can be replaced or upgraded without breaking or having to recreate the application.
Building the WebLock UI
in this chapter, now that we've created the weblock component and made it available to xpcom, we create the ui that actually instantiates the weblock component and uses its methods to control page loading in the browser.
Component Internals
this loader is responsible for initialization, loading, unloading, and supporting the nsimodule interface on behalf of each component.
Packaging WebLock
the next section shows how this process of downloading, copying and registering the necessary files from the xpi can be achieved with an xpinstall installation script.
Preface
details about downloading the sdk, building, and getting programmatic access to gecko components are provided in the appendix to this book, setting up the gecko sdk.
Setting up the Gecko SDK
downloading and setting the sdk the gecko sdk provides all of the tools, headers, and libraries that you need to build xpcom components.
Starting WebLock
if locked, weblock will prevent sites not on the white list from loading.
Creating XPCOM components
document the locking ui site adding ui weblock.xul overlaying new user interface into mozilla weblockoverlay.xul other resources weblock.css image resources packaging weblock component installation overview archiving resources the weblock installation script the weblock trigger script distributing your component appendix a - setting up the gecko sdk downloading and setting the sdk building a microsoft visual cpp project creating a new project adding the gecko sdk to the project settings building a windows project a makefile for unix appendix b - resources weblock resources gecko resources xpcom resources general development resources next » copyright (c) 2003 by doug turner and ian oeschger.
Receiving startup notifications
once that process is completed, extensions can then be loaded by simply reading their manifests, loading their components, and continuing with application startup, all without having to restart the browser.
Components.utils.Sandbox
example executing in current tab scope more ways to load scripts into a sandbox can be found on the loading scripts page.
Components.utils.unload
this may cause modules to misbehave after unloading even if you have a reference to them.
Profiling XPCShell
using an earlier build will cause the profiler to hang the more adventurous can use the nsixpctoolsprofiler.idl interface directly, but be aware that you must start the profiler before loading the files you want to profile (creating an instance of a component loads the file!) ...
imgIDecoderObserver
it lets you monitor the progress of loading an image.
imgIRequest
status_error 0x8 an error occurred loading the image.
mozIAsyncFavicons
setandfetchfaviconforpage() declares that a given page uses a favicon with the given uri and attempts to fetch and save the icon data by loading the favicon uri through a asynchronous network request.
mozIJSSubScriptLoader
see also appendix d: loading scripts ...
nsIAlertsService
inprivatebrowsing optional controls the image loading behavior.
nsIBrowserHistory
this can be and is called before the page is actually added to history, since the page isn't added until it actually starts loading.
nsIChromeFrameMessageManager
content/base/public/nsimessagemanager.idlscriptable handles loading of content in a remote chrome frame.
nsIDOMProgressEvent
dom/interfaces/events/nsidomprogressevent.idlscriptable this interface represents the events sent with progress information while uploading data using the xmlhttprequest object.
nsIDownloadProgressListener
onsecuritychange() called when the level of security being used while downloading changes; for example, if the initial request is made via https but the download switches to http, this function gets called to notify you of that transition.
nsIFrameMessageManager
set to oo if you want to receive messages during the short period after a frame has been removed from the dom and before its frame script has finished unloading.
nsIInstallLocation
priority long the priority level of this install location in loading.
nsILivemarkService
note: the caller is responsible for reloading the livemark after changing its feed uri (since the contents are likely to be different given a different feed).
nsIMessageListenerManager
listenwhenclosed specify true to receive messages during the short period after a frame has been removed from the dom and before its frame script has finished unloading; this is false by default.
nsIMessenger
the nsimessenger interface provides functions for managing the history, undo and redo operations, and for loading, saving, or deleting messages and attachments in mailnews.
nsIMicrosummary
update() update the microsummary, first loading its generator and page content as necessary.
nsIMsgDBView
used during folder loading.
nsINavHistoryContainerResultNode
state_loading 1 the container has been opened asynchronously, but is still loading and is not all the way opened yet.
nsINavHistoryService
this can be and is called before the page is actually added to history, since the page isn't added until it actually starts loading.
nsIParserUtils
to avoid ambient information leakage upon loading the sanitized content, use the sanitizerinternalembedsonly flag.
nsISHistoryListener
entries can be removed from session history for various reasons; for example to control the browser's memory usage, to prevent users from loading documents from history, to erase evidence of prior page loads, etc.
nsIScriptableIO
file and stream guide: [ nsiscriptableio | accessing files | getting file information | reading from files | writing to files | moving, copying and deleting files | uploading and downloading files | working with directories ] important note: the pages from the file and stream guide use the io object (nsiscriptableio), which was not available in any released version of the platform (pending some fixes).
nsITraceableChannel
see modify url before loading page in firefox for an overview of how to modify a request before it is made.
nsIVersionComparator
the service can be accessed directly via services.vc after loading services.jsm or with the following code: var versioncomparator = components.classes["@mozilla.org/xpcom/version-comparator;1"] .getservice(components.interfaces.nsiversioncomparator); method overview long compare(in acstring a, in acstring b); methods compare() compare two version strings.
nsIXMLHttpRequestEventTarget
content/base/public/nsixmlhttprequest.idlscriptable this interface provides access to the event listeners used when uploading data using the xmlhttprequest object.
nsIXMLHttpRequestUpload
content/base/public/nsixmlhttprequest.idlscriptable this interface provides access to the features needed when uploading data using nsixmlhttprequest.
Address Book examples
photo handlers photo handlers allow developers to customize the behavior of the contact editor when loading or saving contact photos.
Events
ondisplayingfolder a folder gets displayed onfolderloading a folder is being loaded onleavingfolder a folder is being unloaded, includes deletion onloadingfolder a folder is being loaded onmakeactive a folderdisplaywidget becomes active onmessagecountschanged the counts of the messages changed onmessagesloaded the messages in the folder have been loaded onmess...
Filelink Providers
this function is called automatically once the dom content is done loading, and is passed a single parameter - the provider instance whose data is being displayed.
MailNews Filters
for imap, we tend to initiate the urls synchronously, but because we don't run two urls simultaneously on the same folder, the urls don't run until we've finished downloading headers.
Mail client architecture overview
url display and dispatching - in order to perform network operations such as downloading new mail, copying and moving messages, and displaying messages from a remote server, the url system interacts with necko and reflects it's state to the mail window.
Thunderbird Binaries
please read the release notes before downloading.
Add to iPhoto
downloading the image the downloadimage() method handles actually downloading the image to a temporary file; it then returns the local pathname of the downloaded file to the caller.
Using js-ctypes
this is as simple as including the following line of code in the desired javascript scope: components.utils.import("resource://gre/modules/ctypes.jsm") loading a native library once you've imported the code module, you can call the ctypes.open() method to load each native library you wish to use.
js-ctypes reference
it is obtained by by loading the ctypes module: components.utils.import("resource://gre/modules/ctypes.jsm"); you can use the ctypes object to load libraries, construct types, and perform miscellaneous tasks such as type casting.
Constants - Plugins
nperr_module_load_failed_error 4 loading of plug-in failed.
Version, UI, and Status Information - Plugins
bool has_windowless() { npbool supportswindowless = false; nperror ret = npn_getvalue(instance, npnvsupportswindowless, &supportswindowless); return ret == nperr_no_error && supportswindowless; } reloading a plug-in when the browser starts up, it loads all the plug-ins it finds in the plugins directory for the platform.
Gecko Plugin API Reference - Plugins
out how much data the plug-in can accept writing the stream to the plug-in sending the stream in random-access mode sending the stream in file mode sending a stream creating a stream pushing data into the stream deleting the stream example of sending a stream urls getting urls getting the url and displaying the page posting urls posting data to an http server uploading files to an ftp server sending mail memory allocating and freeing memory mac os flushing memory (mac os only) version, ui, and status information displaying a status line message getting agent information getting the current version finding out if a feature exists reloading a plug-in plug-in side plug-in api this chapter describes methods in the plug-in api t...
Source map errors - Firefox Developer Tools
the message looks a little different in this case: in this case, the error will also be displayed in the source tab in the debugger: networkerror when attempting to fetch resource a bug in firefox prevents it from loading source maps for web extensions.
Index - Firefox Developer Tools
51 network request list 110n:priority, debugging, dev tools, firefox, guide, networking, tools the request list of the network monitor shows a list of all the network requests made in the course of loading the page.
Basic operations - Firefox Developer Tools
on the left, you'll see an entry for the new snapshot, including its timestamp, size, and controls to save or clear this snapshot: clearing a snapshot to remove a snapshot, click the "x" icon: saving and loading snapshots if you close the memory tool, all unsaved snapshots will be discarded.
Memory - Firefox Developer Tools
the basics opening the memory tool taking a heap snapshot comparing two snapshots deleting snapshots saving and loading snapshots recording call stacks analyzing snapshots the tree map view is new in firefox 48, and the dominators view is new in firefox 46.
Examine and edit CSS - Firefox Developer Tools
any changes you make are temporary: reloading the page will restore the original styling.
Responsive Design Mode - Firefox Developer Tools
reloading on these changes can be helpful because certain page behaviors would otherwise not be applied.
Tips - Firefox Developer Tools
no-cache page loading.
AbstractRange - Web APIs
te website</h1> </div> <article> <section class="entry" id="entry1"> <h2>section 1: an interesting thing...</h2> <p>a <em>very</em> interesting thing happened on the way to the forum...</p> <aside class="callout"> <h2>aside</h2> <p>an interesting aside to share with you...</p> </aside> </section> </article> <pre id="log"></pre> </div> after loading the html and constructing the dom representation of the document, the resulting dom tree looks like this: in this diagram, the nodes representing html elements are shown in green.
Attr - Web APIs
WebAPIAttr
while the type information contained in this attribute is guaranteed to be correct after loading the document or invoking document.normalizedocument, this property may not be reliable if the node was moved.
Background Tasks API - Web APIs
in the past, there's been no way to do this reliably other than by writing code that's as efficient as possible and by offloading as much work as possible to workers.
Body.arrayBuffer() - Web APIs
WebAPIBodyarrayBuffer
if you need to play ogg during downloading (stream it) - consider htmlaudioelement: new audio("music.ogg").play(); in getdata() we create a new request using the request() constructor, then use it to fetch an ogg music track.
CSS.paintWorklet (Static property) - Web APIs
WebAPICSSpaintWorklet
examples the following example demonstrates loading a paintworklet from its js file and does so by feature detection.
CanvasRenderingContext2D.font - Web APIs
html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.font = 'bold 48px serif'; ctx.stroketext('hello world', 50, 100); result loading fonts with the css font loading api with the help of the fontface api, you can explicitly load fonts before using them in a canvas.
Basic usage of canvas - Web APIs
); if (canvas.getcontext) { var ctx = canvas.getcontext('2d'); } } </script> <style type="text/css"> canvas { border: 1px solid black; } </style> </head> <body onload="draw();"> <canvas id="tutorial" width="150" height="150"></canvas> </body> </html> the script includes a function called draw(), which is executed once the page finishes loading; this is done by listening for the load event on the document.
CustomElementRegistry.whenDefined() - Web APIs
<nav id="menu-container"> <div class="menu-placeholder">loading...</div> <nav-menu> <menu-item>item 1</menu-item> <menu-item>item 2</menu-item> ...
DOMHighResTimeStamp - Web APIs
if during the process of unloading the previous document which was loaded in the window, a confirmation dialog was displayed to let the user confirm whether or not to leave the previous page, the time origin is the time at which the user confirmed that navigating to the new page was acceptable.
Document.location - Web APIs
WebAPIDocumentlocation
the document.location read-only property returns a location object, which contains information about the url of the document and provides methods for changing that url and loading another url.
Document.write() - Web APIs
WebAPIDocumentwrite
after writing, call document.close() to tell the browser to finish loading the page.
Introduction to the DOM - Web APIs
when you create a script–whether it's inline in a <script> element or included in the web page by means of a script loading instruction–you can immediately begin using the api for the document or window elements to manipulate the document itself or to get at the children of that document, which are the various elements in the web page.
Element: error event - Web APIs
{ grid-area: log; } .event-log-contents { resize: none; } label, button { display: block; } button { height: 2rem; margin: .5rem; } img { width: 0; height: 0; } js const log = document.queryselector('.event-log-contents'); const badimg = document.queryselector('.bad-img'); badimg.addeventlistener('error', (event) => { log.textcontent = log.textcontent + `${event.type}: loading image\n`; console.log(event) }); const imgerror = document.queryselector('#img-error'); imgerror.addeventlistener('click', () => { badimg.setattribute('src', 'i-dont-exist'); }); result specifications specification status ui events working draft ...
FileReader.abort() - Web APIs
WebAPIFileReaderabort
syntax instanceoffilereader.abort(); exceptions dom_file_abort_err thrown when abort is called while no read operation is in progress (that is, the state isn't loading).
FileReader - Web APIs
loading 1 data is currently being loaded.
Introduction to the File and Directory Entries API - Web APIs
the app can access partially downloaded files (so that you can watch the first chapter of your dvd, even if the app is still downloading the rest of the content or if the app didn't complete the download because you had to run to catch a train).
FontFace.FontFace() - Web APIs
WebAPIFontFaceFontFace
ature settings example async function loadfonts() { const font = new fontface('myfont', 'url(myfont.woff)'); // wait for font to be loaded await font.load(); // add font to document document.fonts.add(font); // enable font with css class document.body.classlist.add('fonts-loaded'); } specifications specification status comment css font loading module level 3the definition of 'fontface constructor' in that specification.
FontFace.family - Web APIs
WebAPIFontFacefamily
example var fontface = new fontface('roboto', 'url(https://fonts.example.com/roboto.woff2)'); console.log(fontface.family); // 'roboto' fontface.family = 'newroboto'; console.log(fontface.family); // 'newroboto' specifications specification status comment css font loading module level 3the definition of 'family' in that specification.
FontFace.featureSettings - Web APIs
specifications specification status comment css font loading module level 3the definition of 'featuresettings' in that specification.
FontFace.stretch - Web APIs
WebAPIFontFacestretch
specifications specification status comment css font loading module level 3the definition of 'stretch' in that specification.
FontFace.style - Web APIs
WebAPIFontFacestyle
specifications specification status comment css font loading module level 3the definition of 'style' in that specification.
FontFace.unicodeRange - Web APIs
specifications specification status comment css font loading module level 3the definition of 'unicoderange' in that specification.
FontFace.variant - Web APIs
WebAPIFontFacevariant
specifications specification status comment css font loading module level 3the definition of 'variant' in that specification.
FontFace.weight - Web APIs
WebAPIFontFaceweight
specifications specification status comment css font loading module level 3the definition of 'weight' in that specification.
FontFaceSet.check() - Web APIs
WebAPIFontFaceSetcheck
specifications specification status comment css font loading module level 3the definition of 'check' in that specification.
FontFaceSet.load() - Web APIs
WebAPIFontFaceSetload
document.fonts.load("12px myfont", "ß").then(…); specifications specification status comment css font loading module level 3the definition of 'load' in that specification.
FontFaceSet.ready - Web APIs
WebAPIFontFaceSetready
specifications specification status comment css font loading module level 3the definition of 'fontfaceset' in that specification.
FontFaceSetLoadEvent.FontFaceSetLoadEvent() - Web APIs
specifications specification status comment css font loading module level 3the definition of 'fontfacesetloadevent()' in that specification.
FontFaceSetLoadEvent.fontfaces - Web APIs
specifications specification status comment css font loading module level 3the definition of 'fontfaces' in that specification.
Using FormData Objects - Web APIs
submitting forms and uploading files via ajax without formdata objects if you want to know how to serialize and submit a form via ajax without using formdata objects, please read this paragraph.
GlobalEventHandlers.onloadeddata - Web APIs
the loadeddata event is fired when the first frame of the media has finished loading.
GlobalEventHandlers.onloadend - Web APIs
the onloadend property of the globaleventhandlers mixin is an eventhandler representing the code to be called when the loadend event is raised (when progress has stopped on the loading of a resource.) syntax img.onloadend = funcref; value funcref is the handler function to be called when the resource's loadend event fires.
GlobalEventHandlers.onloadstart - Web APIs
the onloadstart property of the globaleventhandlers mixin is an eventhandler representing the code to be called when the loadstart event is raised (when progress has begun on the loading of a resource.) syntax img.onloadstart = funcref; value funcref is the handler function to be called when the resource's loadstart event fires.
GlobalEventHandlers - Web APIs
globaleventhandlers.onloadend is an eventhandler representing the code to be called when the loadend event is raised (when progress has stopped on the loading of a resource.) globaleventhandlers.onloadstart is an eventhandler representing the code to be called when the loadstart event is raised (when progress has begun on the loading of a resource.) globaleventhandlers.onlostpointercapture is an eventhandler representing the code to be called when the lostpointercapture event type is raised.
HTMLAudioElement - Web APIs
e="#d4dde4" stroke-width="2px" /><text x="211" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlaudioelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constructor audio() creates and returns a new htmlaudioelement object, optionally starting the process of loading an audio file into it if the file url is given.
HTMLCanvasElement.mozGetAsFile() - Web APIs
html <canvas id="canvas" width="100" height="100"></canvas> <p><a href="#" id="link">click here to try out mozgetasfile()</a>.</p> javascript the following code uses mozgetasfile() to create a file object from the canvas and appends it as an image to the page by loading it as a data url using the readasdataurl() method.
HTMLFormElement - Web APIs
nput type="radio" name="pet" value="dog"> dog</label></p> </fieldset> <fieldset> <legend>owned vehicles</legend> <p><label><input type="checkbox" name="vehicle" value="bike">i have a bike</label></p> <p><label><input type="checkbox" name="vehicle" value="car">i have a car</label></p> </fieldset> <p><button>submit</button></p> </form> </body> </html> submitting forms and uploading files using xmlhttprequest if you want to know how to serialize and submit a form using the xmlhttprequest api, please read this paragraph.
HTMLImageElement.alt - Web APIs
this may be the case because of an error, because the user has disabled the loading of images, or because the image simply hasn't finished loading yet.
HTMLImageElement.lowSrc - Web APIs
the htmlimageelement interface's obsolete lowsrc property can be used to specify the url of a reduced-quality or otherwise faster-loading version of the image specified by the src property.
HTMLImageElement.srcset - Web APIs
if you happen to have both standard and high density displays, try moving this window between them and reloading the page to see the results change.
HTMLImageElement - Web APIs
htmlimageelement.loading a domstring providing a hint to the browser used to optimize loading the document by determining whether to load the image immediately (eager) or on an as-needed basis (lazy).
HTMLLinkElement - Web APIs
note that currently firefox only supports preloading of cacheable resources.
HTMLMediaElement: abort event - Web APIs
bubbles no cancelable no interface event event handler property onabort examples const video = document.queryselector('video'); const videosrc = 'https://path/to/video.webm'; video.addeventlistener('abort', () => { console.log(`abort loading: ${videosrc}`); }); const source = document.createelement('source'); source.setattribute('src', videosrc); source.setattribute('type', 'video/webm'); video.appendchild(source); specifications specification status html living standard living standard html5 recommendation ...
HTMLMediaElement: error event - Web APIs
bubbles no cancelable no interface event event handler property onerror examples const video = document.queryselector('video'); const videosrc = 'https://path/to/video.webm'; video.addeventlistener('error', () => { console.error(`error loading: ${videosrc}`); }); video.setattribute('src', videosrc); specifications specification status html living standard living standard html5 recommendation ...
HTMLMediaElement: loadeddata event - Web APIs
the loadeddata event is fired when the frame at the current playback position of the media has finished loading; often the first frame.
The HTML DOM API - Web APIs
among the things added to document by the html standard are: support for accessing various information provided by the http headers when loading the page, such as the location from which the document was loaded, cookies, modification date, referring site, and so forth.
IDBDatabase.close() - Web APIs
WebAPIIDBDatabaseclose
// create event handlers for both success and failure of dbopenrequest.onerror = function(event) { note.innerhtml += "<li>error loading database.</li>"; }; dbopenrequest.onsuccess = function(event) { note.innerhtml += "<li>database initialised.</li>"; // store the result of opening the database in the db variable.
IDBDatabase.createObjectStore() - Web APIs
request.onupgradeneeded = function(event) { var db = event.target.result; db.onerror = function(event) { note.innerhtml += "<li>error loading database.</li>"; }; // create an objectstore for this database var objectstore = db.createobjectstore("todolist", { keypath: "tasktitle" }); // define what data items the objectstore will contain objectstore.createindex("hours", "hours", { unique: false }); objectstore.createindex("minutes", "minutes", { unique: false }); objectstore.createindex("day", "day", { unique: false });...
IDBDatabase.name - Web APIs
WebAPIIDBDatabasename
// let us open our database var dbopenrequest = window.indexeddb.open("todolist", 4); // these two event handlers act on the database being // opened successfully, or not dbopenrequest.onerror = function(event) { note.innerhtml += '<li>error loading database.</li>'; }; dbopenrequest.onsuccess = function(event) { note.innerhtml += '<li>database initialised.</li>'; // store the result of opening the database in the db variable.
IDBDatabase.objectStoreNames - Web APIs
example // let us open our database var dbopenrequest = window.indexeddb.open("todolist", 4); // these two event handlers act on the database being opened successfully, or not dbopenrequest.onerror = function(event) { note.innerhtml += '<li>error loading database.</li>'; }; dbopenrequest.onsuccess = function(event) { note.innerhtml += '<li>database initialised.</li>'; // store the result of opening the database in the db variable.
IDBDatabase.version - Web APIs
example // let us open our database var dbopenrequest = window.indexeddb.open("todolist", 4); // these two event handlers act on the database // being opened successfully, or not dbopenrequest.onerror = function(event) { note.innerhtml += '<li>error loading database.</li>'; }; dbopenrequest.onsuccess = function(event) { note.innerhtml += '<li>database initialised.</li>'; // store the result of opening the database in the db variable.
IDBFactory.open() - Web APIs
WebAPIIDBFactoryopen
ange || window.webkitidbkeyrange || window.msidbkeyrange; // (mozilla has never prefixed these objects, so we don't // need window.mozidb*) // let us open version 4 of our database var dbopenrequest = window.indexeddb.open("todolist", 4); // these two event handlers act on the database being opened // successfully, or not dbopenrequest.onerror = function(event) { note.innerhtml += '<li>error loading database.</li>'; }; dbopenrequest.onsuccess = function(event) { note.innerhtml += '<li>database initialised.</li>'; // store the result of opening the database in the db // variable.
IDBFactory - Web APIs
window.idbkeyrange || window.webkitidbkeyrange || window.msidbkeyrange; // (mozilla has never prefixed these objects, so we don't need window.mozidb*) // let us open version 4 of our database var dbopenrequest = window.indexeddb.open("todolist", 4); // these two event handlers act on the database being opened successfully, or not dbopenrequest.onerror = function(event) { console.error("error loading database."); }; dbopenrequest.onsuccess = function(event) { console.info("database initialised."); // store the result of opening the database in the db variable.
IDBObjectStore - Web APIs
= dbopenrequest.result; }; // this event handles the event whereby a new version of // the database needs to be created either one has not // been created before, or a new version number has been // submitted via the window.indexeddb.open line above dbopenrequest.onupgradeneeded = function(event) { var db = event.target.result; db.onerror = function(event) { note.innerhtml += '<li>error loading database.</li>'; }; // create an objectstore for this database var objectstore = db.createobjectstore("todolist", { keypath: "tasktitle" }); // define what data items the objectstore will contain objectstore.createindex("hours", "hours", { unique: false }); objectstore.createindex("minutes", "minutes", { unique: false }); objectstore.createindex("day", "day", { unique: false });...
IDBRequest - Web APIs
for a full working example, see our to-do notifications app (view example live.) var db; // let us open our database var dbopenrequest = window.indexeddb.open("todolist", 4); // these two event handlers act on the database being // opened successfully, or not dbopenrequest.onerror = function(event) { note.innerhtml += '<li>error loading database.</li>'; }; dbopenrequest.onsuccess = function(event) { note.innerhtml += '<li>database initialised.</li>'; // store the result of opening the database.
IDBVersionChangeEvent.newVersion - Web APIs
eyrange = window.idbkeyrange || window.webkitidbkeyrange || window.msidbkeyrange; // (mozilla has never prefixed these objects, // so we don't need window.mozidb*) // let us open version 4 of our database var dbopenrequest = window.indexeddb.open("todolist", 4); // these two event handlers act on the database being opened dbopenrequest.onerror = function(event) { note.innerhtml += '<li>error loading database.</li>'; }; dbopenrequest.onsuccess = function(event) { note.innerhtml += '<li>database initialised.</li>'; // store the result of opening the database in the db variable.
IDBVersionChangeEvent - Web APIs
idbkeyrange || window.webkitidbkeyrange || window.msidbkeyrange; // (mozilla has never prefixed these objects, so we don't need window.mozidb*) // let us open version 4 of our database var dbopenrequest = window.indexeddb.open("todolist", 4); // these two event handlers act on the database being opened successfully, or not dbopenrequest.onerror = function(event) { note.innerhtml += '<li>error loading database.</li>'; }; dbopenrequest.onsuccess = function(event) { note.innerhtml += '<li>database initialised.</li>'; // store the result of opening the database in the db variable.
startSoftwareUpdate - Web APIs
summary triggers the downloading and installation of the software at the specified url.
InstallTrigger - Web APIs
startsoftwareupdate triggers the downloading and installation of the software at the specified url.
Timing element visibility with the Intersection Observer API - Web APIs
creating an ad the loadrandomad() function simulates loading an ad and adding it to the page.
Key Values - Web APIs
vk_browser_search (0xaa) appcommand_browser_search gdk_key_search (0x1008ff1b) qt::key_search (0x01000092) keycode_search (84) "browserstop" stops loading the currently displayed web view or content.
MediaImage - Web APIs
note that it is just a hint so that user agent may ignore images of types it does not support; user agent still may use mime type sniffing after downloading the image to determine its type.
load() - Web APIs
the mediakeysession.load() method returns a promise that resolves to a boolean value after loading data for a specified session object.
Recording a media element - Web APIs
below the playback element is a button for downloading the recorded video.
Navigation Timing API - Web APIs
calculate page render time as another example of an interesting piece of data you can obtain using the navigation timing api that you can't otherwise easily get, you can get the amount of time it took to render the page: const rendertime = perfdata.domcomplete - perfdata.domloading; this is obtained by starting with the time at which loading of the dom and its dependencies is complete (domcomplete) and subtracting from it the time at which parsing of the dom began (domloading).
Network Information API - Web APIs
this example would be called soon after page load to check for a connection type where preloading a video may not be desirable.
PageTransitionEvent.persisted - Web APIs
the persisted read-only property indicates if a webpage is loading from a cache.
PageTransitionEvent - Web APIs
pagetransitionevent.persisted read only indicates if the document is loading from a cache.
Using the Payment Request API - Web APIs
const checkoutbutton = document.getelementbyid('checkout-button'); checkoutbutton.innertext = "loading..."; if (window.paymentrequest) { let request = new paymentrequest(buildsupportedpaymentmethodnames(), buildshoppingcartdetails()); request.canmakepayment().then(function(canmakeafastpayment) { if (canmakeafastpayment) { checkoutbutton.innertext = "fast checkout with w3c"; } else { checkoutbutton.innertext = "setup w3c checkout"; } }).catch(function(error) { ...
performance.clearResourceTimings() - Web APIs
example function load_resource() { var image = new image(); image.src = "https://developer.mozilla.org/static/img/opengraph-logo.png"; } function clear_performance_timings() { if (performance === undefined) { log("browser does not support web performance"); return; } // create a resource timing performance entry by loading an image load_resource(); var supported = typeof performance.clearresourcetimings == "function"; if (supported) { console.log("run: performance.clearresourcetimings()"); performance.clearresourcetimings(); } else { console.log("performance.clearresourcetimings() not supported"); return; } // getentries should now return zero var p = performance.getentriesbytype("res...
PerformanceEntry - Web APIs
performance entries are also created in indirect ways such as loading a resource (such as an image).
Performance API - Web APIs
performanceresourcetiming provides methods and properties for retrieving and analyzing detailed network timing data regarding the loading of an application's resources.
PluginArray - Web APIs
pluginarray.refresh refreshes all plugins on the current page, optionally reloading documents.
ProgressEvent.loaded - Web APIs
when downloading a resource using http, this only represent the part of the content itself, not headers and other overhead.
ProgressEvent.total - Web APIs
when downloading a resource using http, this only represent the content itself, not headers and other overhead.
SVGElement: abort event - Web APIs
the abort event is fired when page loading is stopped before an svg element has been allowed to load completely.
SVGElement - Web APIs
abort fired when page loading is stopped before an svg element has been allowed to load completely.
ServiceWorkerContainer - Web APIs
this can be used to react to sent messages earlier, even before that page's content has finished loading.
Using Service Workers - Web APIs
you then run code in the service worker outside of your normal pages to control their loading.
Service Worker API - Web APIs
navigationpreloadmanager provides methods for managing the preloading of resources with a service worker.
Storage Access API - Web APIs
design properties unique to firefox are summarized here: if the embedded origin tracker.example has already obtained first-party storage access on the top-level origin foo.example, and the user visits a page from foo.example embedding a page from tracker.example again in less than 30 days, the embedded origin will have storage access immediately when loading.
TextTrack.mode - Web APIs
WebAPITextTrackmode
however, that means that if you wish to perform any actions involving the track's cues while handling, for example, the load event—in order to process some aspect of the cues upon page load—and the track mode was initially disabled, you'll have to change the mode to either hidden or showing in order to trigger loading of the cues.
TimeRanges - Web APIs
the timeranges interface is used to represent a set of time ranges, primarily for the purpose of tracking which portions of media have been buffered when loading it for use by the <audio> and <video> elements.
TransformStream - Web APIs
examples include building a pwa with progressive loading and progressive streaming.
URL API - Web APIs
WebAPIURL API
just add parameters to the url when loading the page to see them in the table.
USBDevice.deviceClass - Web APIs
the deviceclass read only property of the usbdevice interface one of three properties that identify usb devices for the purpose of loading a usb driver that will work with that device.
USBDevice.deviceClass - Web APIs
the deviceclass read only property of the usbdevice interface one of three properties that identify usb devices for the purpose of loading a usb driver that will work with that device.
USBDevice.deviceProtocol - Web APIs
the deviceprotocol read only property of the usbdevice interface one of three properties that identify usb devices for the purpose of loading a usb driver that will work with that device.
USBDevice.deviceSubclass - Web APIs
the devicesubclass read only property of the usbdevice interface one of three properties that identify usb devices for the purpose of loading a usb driver that will work with that device.
Movement, orientation, and motion: A WebXR example - Web APIs
starting up and shutting down webxr upon initially loading the script, we install a handler for the load event, so that we can perform initialization.
Web Audio API best practices - Web APIs
loading sounds/files there are four main ways to load sound with the web audio api and it can be a little confusing as to which one you should use.
Background audio processing using AudioWorklet - Web APIs
it's also more efficient than loading multiple modules from over the network or even the user's local disk.
Window: DOMContentLoaded event - Web APIs
the domcontentloaded event fires when the initial html document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading.
Window.console - Web APIs
WebAPIWindowconsole
console.log("an error occurred while loading the content"); the next example logs an object to the console, with the object's fields expandable using disclosure widgets: console.dir(someobject); see usage in console for more thorough examples.
window.location - Web APIs
WebAPIWindowlocation
location.assign("http://www.mozilla.org"); // or location = "http://www.mozilla.org"; example #2: force reloading the current page from the server location.reload(true); example #3 consider the following example, which will reload the page by using the replace() method to insert the value of location.pathname into the hash: function reloadpagewithhash() { var initialpage = location.pathname; location.replace('http://example.com/#' + initialpage); } example #4: display the properties of the current ...
Window.ondragdrop - Web APIs
WebAPIWindowondragdrop
note how event.stoppropagation(); prevents the browser from loading the dropped tab, link or file.
Window.open() - Web APIs
WebAPIWindowopen
the window creation and the loading of the referenced resource are done asynchronously.
Window: unload event - Web APIs
cancelable no interface event event handler property onunload it is fired after: beforeunload (cancelable event) pagehide the document is in the following state: all the resources still exist (img, iframe etc.) nothing is visible anymore to the end user ui interactions are ineffective (window.open, alert, confirm, etc.) an error won't stop the unloading workflow please note that the unload event also follows the document tree: parent frame unload will happen before child frame unload (see example below).
WindowClient - Web APIs
the service worker client independently selects and uses a service worker for its own loading and sub-resources.
WindowEventHandlers.onbeforeunload - Web APIs
example this example prompts the user before unloading.
WindowEventHandlers.onunload - Web APIs
these events fire when the window is unloading its content and resources.
WindowOrWorkerGlobalScope.setTimeout() - Web APIs
deferral of timeouts during pageload starting in firefox 66, firefox will defer firing settimeout and setinterval timers while the current tab is loading.
Worklet.addModule() - Web APIs
WebAPIWorkletaddModule
cookies and http authentification) when loading the module.
Synchronous and asynchronous requests - Web APIs
this results in the unloading of the page to be delayed.
Using XMLHttpRequest - Web APIs
submitting forms and uploading files instances of xmlhttprequest can be used to submit forms in two ways: using only ajax using the formdata api using the formdata api is the simplest and fastest, but has the disadvantage that data collected can not be stringified.
XMLHttpRequest.abort() - Web APIs
return value undefined example this example begins loading content from the mdn home page, then due to some condition, aborts the transfer by calling abort().
XMLHttpRequest.response - Web APIs
the value is null if the request is not yet complete or was unsuccessful, with the exception that when reading text data using a responsetype of "text" or the empty string (""), the response can contain the response so far while the request is still in the loading readystate (3).
XMLHttpRequest.status - Web APIs
example var xhr = new xmlhttprequest(); console.log('unsent: ', xhr.status); xhr.open('get', '/server'); console.log('opened: ', xhr.status); xhr.onprogress = function () { console.log('loading: ', xhr.status); }; xhr.onload = function () { console.log('done: ', xhr.status); }; xhr.send(); /** * outputs the following: * * unsent: 0 * opened: 0 * loading: 200 * done: 200 */ specifications specification status comment xmlhttprequest living standard whatwg living standard ...
XMLHttpRequest.statusText - Web APIs
example var xhr = new xmlhttprequest(); console.log('0 unsent', xhr.statustext); xhr.open('get', '/server', true); console.log('1 opened', xhr.statustext); xhr.onprogress = function () { console.log('3 loading', xhr.statustext); }; xhr.onload = function () { console.log('4 done', xhr.statustext); }; xhr.send(null); /** * outputs the following: * * 0 unsent * 1 opened * 3 loading ok * 4 done ok */ specifications specification status comment xmlhttprequest living standard whatwg living standard ...
XMLHttpRequestEventTarget - Web APIs
xmlhttprequesteventtarget.onloadstart contains the function that gets called when the http request first begins loading data and the loadstart event is received by this object.
XRSession.requestAnimationFrame() - Web APIs
if (!xrsession) { renderframe(time, null) } } // the window animation loop can be started immediately upon the page loading.
XSLTProcessor - Web APIs
default value: 0 possible values are: name value effect (none) 0 none disable_all_loads 1 disable loading external documents (via e.g.
Web APIs
WebAPI
aambient light eventsbbackground tasksbattery api beaconbluetooth apibroadcast channel apiccss counter stylescss font loading api cssomcanvas apichannel messaging apiconsole apicredential management apiddomeencoding apiencrypted media extensionsffetch apifile system api frame timing apifullscreen apiggamepad api geolocation apihhtml drag and drop apihigh resolution timehistory apiiimage capture apiindexeddbintersection observer apillong tasks api mmedia capabilities api media capture and streamsmedia session apimed...
Using the alert role - Accessibility
the moment the element finishes loading the screen reader should be notified of the alert.
Using the progressbar role - Accessibility
if the progressbar is describing the loading progress of a particular region of a page, the author should use aria-describedby to point to the status, and set the aria-busy attribute to true on the region until it is finished loading.
ARIA: application role - Accessibility
background for historic reasons, especially on windows, screen readers and some other assistive technologies (at) have traditionally grabbed the whole web content from the browser at once after it had finished loading.
WAI-ARIA Roles - Accessibility
a feed enables screen readers to use the browse mode reading cursor to both read and scroll through a stream of rich content that may continue scrolling infinitely by loading more content as the user reads.aria: figure rolethe aria figure role can be used to identify a figure inside page content where appropriate semantics do not already exist.
Accessibility documentation index - Accessibility
a feed enables screen readers to use the browse mode reading cursor to both read and scroll through a stream of rich content that may continue scrolling infinitely by loading more content as the user reads.
:-moz-suppressed - CSS: Cascading Style Sheets
the :-moz-suppressed css pseudo-class is a mozilla extension that matches elements representing images that were suppressed because loading images from the specified site has been blocked.
:disabled - CSS: Cascading Style Sheets
WebCSS:disabled
checkbox">same as shipping address:</label> <input type="checkbox" id="billing-checkbox" checked> <br> <input type="text" placeholder="name" disabled> <input type="text" placeholder="address" disabled> <input type="text" placeholder="zip code" disabled> </fieldset> </form> css input[type="text"]:disabled { background: #ccc; } javascript // wait for the page to finish loading document.addeventlistener('domcontentloaded', function () { // attach `change` event listener to checkbox document.getelementbyid('billing-checkbox').onchange = togglebilling; }, false); function togglebilling() { // select the billing text fields var billingitems = document.queryselectorall('#billing input[type="text"]'); // toggle the billing text fields for (var i = 0; i < billin...
src - CSS: Cascading Style Sheets
WebCSS@font-facesrc
if a user agent doesn't support the specified formats, it skips downloading the font resource.
@font-face - CSS: Cascading Style Sheets
it's common to use both url() and local() together, so that the user's installed copy of the font is used if available, falling back to downloading a copy of the font if it's not found on the user's device.
Using URL values for the cursor property - CSS: Cascading Style Sheets
for example, the following value would be allowed: cursor: url(foo.cur), url(http://www.example.com/bar.gif), auto; this will first try loading foo.cur.
Variable fonts guide - CSS: Cascading Style Sheets
using a variable font: @font-face changes the syntax for loading variable fonts is very similar to any other web font, with a few notable differences, which are provided via upgrades to the traditional @font-face syntax now available in modern browsers.
Consistent list indentation - CSS: Cascading Style Sheets
gecko, on the other hand, sets a left padding of 40 pixels for the <ul> element, so given the exact same styles as were used to produce figure 5, loading the example into a gecko-based browser gives us figure 6.
Mozilla CSS extensions - CSS: Cascading Style Sheets
and :visited] :-moz-broken ::-moz-canvas ::-moz-color-swatch ::-moz-cell-content :-moz-drag-over f – i :-moz-first-node ::-moz-focus-inner ::-moz-focus-outer :-moz-focusring :-moz-full-screen :-moz-full-screen-ancestor :-moz-handler-blocked :-moz-handler-crashed :-moz-handler-disabled ::-moz-inline-table l :-moz-last-node :-moz-list-bullet :-moz-list-number :-moz-loading :-moz-locale-dir(ltr) :-moz-locale-dir(rtl) :-moz-lwtheme :-moz-lwtheme-brighttext :-moz-lwtheme-darktext n – r :-moz-native-anonymous :-moz-only-whitespace ::-moz-page ::-moz-page-sequence ::-moz-pagebreak ::-moz-pagecontent :-moz-placeholderobsolete since gecko 51 ::-moz-placeholderdeprecated since gecko 51 ::-moz-progress-bar ::-moz-range-progress ::-moz-range-thumb ::...
Ajax - Developer guides
WebGuideAJAX
when these technologies are combined in the ajax model, web applications are able to make quick, incremental updates to the user interface without reloading the entire browser page.
Guide to Web APIs - Developer guides
WebGuideAPI
web apis from a to z aambient light eventsbbackground tasksbattery api beaconbluetooth apibroadcast channel apiccss counter stylescss font loading api cssomcanvas apichannel messaging apiconsole apicredential management apiddomeencoding apiencrypted media extensionsffetch apifile system api frame timing apifullscreen apiggamepad api geolocation apihhtml drag and drop apihigh resolution timehistory apiiimage capture apiindexeddbintersection observer apillong tasks api mmedia capabilities api media capture and streamsmedia session apimed...
Live streaming web audio and video - Developer guides
for example, you could implement mpeg-dash using javascript while offloading the decoding to mse.
Audio and Video Delivery - Developer guides
other tips for audio/video stopping the download of media while stopping the playback of media is as easy as calling the element's pause() method, the browser keeps downloading the media until the media element is disposed of through garbage collection.
Event developer guide - Developer guides
WebGuideEvents
the process loading of a web page can trigger events in response to the completion of different steps in the downloading, parsing, and rendering of the web page for display to the user.
HTML5 Parser - Developer guides
WebGuideHTMLHTML5HTML5 Parser
some contexts from which you should not call document.write() include: scripts created using document.createelement() event handlers settimeout() setinterval() <script async src="..."> <script defer src="..."> if you use the same mechanism for loading script libraries for all browsers including ie, then your code probably will not be affected by this change.
HTML5 - Developer guides
WebGuideHTMLHTML5
this is especially useful for pages loading interactively new information.
Localizations and character encodings - Developer guides
you can see the fallback encoding a particular browser has by loading a test page.
Mobile Web Development - Developer guides
WebGuideMobile
optimizing images to help users whose devices have low or expensive bandwidth, you can optimize images by loading images appropriate to the device screen size and resolution.
Developer guides
ajax ajax is a term that defines a group of technologies allowing web applications to make quick, incremental updates to the user interface without reloading the entire browser page.
<a>: The Anchor element - HTML: Hypertext Markup Language
WebHTMLElementa
these bogus href values cause unexpected behavior when copying/dragging links, opening links in a new tab/window, bookmarking, or when javascript is loading, errors, or is disabled.
<area> - HTML: Hypertext Markup Language
WebHTMLElementarea
download this attribute, if present, indicates that the author intends the hyperlink to be used for downloading a resource.
<body>: The Document Body element - HTML: Hypertext Markup Language
WebHTMLElementbody
onload function to call when the document has finished loading.
<input>: The Input (Form Input) element - HTML: Hypertext Markup Language
WebHTMLElementinput
autofocus a boolean attribute which, if present, indicates that the input should automatically have focus when the page has finished loading (or when the <dialog> containing the element has been displayed).
<object> - HTML: Hypertext Markup Language
WebHTMLElementobject
standbyhtml 4 onlyobsolete since html5 a message that the browser can show while loading the object's implementation and data.
<template>: The Content Template element - HTML: Hypertext Markup Language
WebHTMLElementtemplate
while the parser does process the contents of the <template> element while loading the page, it does so only to ensure that those contents are valid; the element's contents are not rendered, however.
HTML documentation index - HTML: Hypertext Markup Language
WebHTMLIndex
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 kicks i...
Link types: preload - HTML: Hypertext Markup Language
see preloading content with rel="preload" for more details.
Identifying resources on the Web - HTTP
ftp is still acceptable at the top level (such as typed directly into the browser's url bar, or the target of a link), although some browsers may delegate loading ftp content to another application.
MIME types (IANA media types) - HTTP
each part is its own entity with its own http headers, content-disposition, and content-type for file uploading fields.
Resource URLs - HTTP
solution in order to fix this problem, mozilla changed the behavior of loading resource: uris in bug 863246, which landed in firefox 57 (quantum).
Content Security Policy (CSP) - HTTP
WebHTTPCSP
violation report syntax the report json object contains the following data: blocked-uri the uri of the resource that was blocked from loading by the content security policy.
HTTP caching - HTTP
WebHTTPCaching
when a web cache has a requested resource in its store, it intercepts the request and returns its copy instead of re-downloading from the originating server.
Configuring servers for Ogg media - HTTP
setting payload to auto tells the browser to automatically begin downloading the media as soon as the page is loaded, under the assumption that the user will play it.
CSP: block-all-mixed-content - HTTP
the http content-security-policy (csp) block-all-mixed-content directive prevents loading any assets over http when the page uses https.
CSP: font-src - HTTP
examples violation cases given this csp header: content-security-policy: font-src https://example.com/ the following font resource loading is blocked and won't load: <style> @font-face { font-family: "myfont"; src: url("https://not-example.com/font"); } body { font-family: "myfont"; } </style> specifications specification status comment content security policy level 3the definition of 'font-src' in that specification.
CSP: frame-ancestors - HTTP
if no url scheme is specified for a host-source and the iframe is loaded from an https url, the url for the page loading the iframe must also be https, per the w3c spec on matching source expressions.
CSP: frame-src - HTTP
the http content-security-policy (csp) frame-src directive specifies valid sources for nested browsing contexts loading using elements such as <frame> and <iframe>.
CSP: media-src - HTTP
the http content-security-policy (csp) media-src directive specifies valid sources for loading media using the <audio> and <video> elements.
CSP: script-src - HTTP
for example, a policy such as script-src 'strict-dynamic' 'nonce-r4nd0m' https://whitelisted.com/ would allow loading of a root script with <script nonce="r4nd0m" src="https://example.com/loader.js"> and propagate that trust to any script loaded by loader.js, but disallow loading scripts from https://whitelisted.com/ unless accompanied by a nonce or loaded from a trusted script.
Content-Security-Policy-Report-Only - HTTP
content-security-policy: default-src https:; report-uri /csp-violation-report-endpoint/ violation report syntax the report json object contains the following data: blocked-uri the uri of the resource that was blocked from loading by the content security policy.
Cross-Origin-Embedder-Policy - HTTP
the http cross-origin-embedder-policy (coep) response header prevents a document from loading any cross-origin resources that don't explicitly grant the document permission (using corp or cors).
Feature-Policy: unsized-media - HTTP
this restriction solves "layout instability" problem caused by providing default dimensions for images whose size is not specified in advance so that image doesn't change size after loading.
If-None-Match - HTTP
they are only useful when uploading a resource, usually with put, to check if another resource with the identity has already been uploaded before.
Large-Allocation - HTTP
this error is displayed when loading a document with a large-allocation header with a non-get http method.
X-DNS-Prefetch-Control - HTTP
if the domain names for images can be resolved in advance of the images being requested, pages that load many images can see an improvement of 5% or more in the time of loading images.
HTTP headers - HTTP
WebHTTPHeaders
used to prevent downloading two ranges from incompatible version of the resource.
HEAD - HTTP
WebHTTPMethodsHEAD
for example, if a url might produce a large download, a head request could read its content-length header to check the filesize without actually downloading the file.
HTTP range requests - HTTP
partial requests are useful for large media or downloading files with pause and resume functions, for example.
103 Early Hints - HTTP
WebHTTPStatus103
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.
409 Conflict - HTTP
WebHTTPStatus409
for example, you may get a 409 response when uploading a file which is older than the one already on the server resulting in a version control conflict.
HTTP response status codes - HTTP
WebHTTPStatus
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.
Introduction - JavaScript
there are also more advanced server side versions of javascript such as node.js, which allow you to add more functionality to a website than simply downloading files (such as realtime collaboration between multiple computers).
JavaScript Guide - JavaScript
ing object hierarchies inheritance promises guarantees chaining error propagation composition timing iterators and generators iterators iterables generators meta programming proxy handlers and traps revocable proxy reflect javascript modules exporting importing default exports renaming features aggregating modules dynamic module loading next » ...
ReferenceError: "x" is not defined - JavaScript
note: when loading a library (such as jquery), make sure it is loaded before you access library variables, such as "$".
Promise - JavaScript
loading an image with xhr another simple example using promise and xmlhttprequest to load an image is available at the mdn github js-examples repository.
WebAssembly - JavaScript
description the primary uses for the webassembly object are: loading webassembly code, using the webassembly.instantiate() function.
eval() - JavaScript
see also downloading json and javascript in extensions.
import.meta - JavaScript
.mjs new url(import.meta.url).searchparams.get('someurlinfo'); // 5 the same applies when a file imports another: // index.mjs import './index2.mjs?someurlinfo=5'; // index2.mjs new url(import.meta.url).searchparams.get('someurlinfo'); // 5 note that while node.js will pass on query parameters (or the hash) as in the latter example, as of node 14.1.0, a url with query parameters will err when loading in the form node --experimental-modules index.mjs?someurlinfo=5 (it is treated as a file rather than a url in this context).
Web audio codec guide - Web media technologies
audacity an open source audio editor that supports loading audio from many different formats, editing, filtering, and adjusting the audio, and saving it back out in either the original format or a new format.
Codecs used by WebRTC - Web media technologies
this is due to a change in google play store requirements that prevent firefox from downloading and installing the openh264 codec needed to handle h.264 in webrtc connections.
OpenSearch description format
you can check by loading the file directly into firefox.
Animation performance and frame rate - Web Performance
for animated media, such as video and animated gifs, the main performance concern is file size - downloading the file size fast enough to not negatively impact performance is the greatest issue.
Using dns-prefetch - Web Performance
for websites that open connections to many third parties, this latency can significantly reduce loading performance.
Add to Home screen - Progressive web apps (PWAs)
(note: in android 8 and higher, a system-level "add to home screen" permission dialog will be shown first.) if you have mobile chrome available, the experience is slightly different; upon loading our site, you'll see an install banner pop up asking whether you want to add this app to your home screen.
Installing and uninstalling web apps - Progressive web apps (PWAs)
google chrome for android if you have google chrome for android available, the experience is slightly different; upon loading our site, you'll see an install banner pop up asking whether you want to add this app to your home screen.
How to make PWAs installable - Progressive web apps (PWAs)
it contains useful information, such as the app’s title, paths to different-sized icons that can be used to represent the app on an os (such as an icon on the home screen, an entry in the start menu, or an icon on the desktop), and a background color to use in loading or splash screens.
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.
Introduction - SVG: Scalable Vector Graphics
a downside is loading svg can be slow.
Mixed content - Web security
note: since firefox 55, the loading of mixed content is allowed on http://127.0.0.1/ (see bug 903966).
Tutorials
tips for authoring fast-loading html pages optimize web pages to provide a more responsive site for visitors and reduce the load on your web server and internet connection.
Index - XSLT: Extensible Stylesheet Language Transformations
WebXSLTIndex
the javascript loads the .xsl file only on the first sort and sets the xslloaded variable to true once it has finished loading the file.
Using the Mozilla JavaScript interface to XSL Transformations - XSLT: Extensible Stylesheet Language Transformations
instead of this: var processor = new xsltprocessor(); do this: var processor = components.classes["@mozilla.org/document-transformer;1?type=xslt"] .createinstance(components.interfaces.nsixsltprocessor); see also the xslt javascript interface in gecko document.load() regarding the loading of xml documents (as used above) original document information author(s): mike hearn last updated date: december 21, 2005 copyright information: copyright (c) mike hearn ...
Advanced Example - XSLT: Extensible Stylesheet Language Transformations
the javascript loads the .xsl file only on the first sort and sets the xslloaded variable to true once it has finished loading the file.
Index - WebAssembly
8 index index, webassembly found 12 pages: 9 loading and running webassembly code fetch, javascript, webassembly, xmlhttprequest, bytecode to use webassembly in javascript, you first need to pull your module into memory before compilation/instantiation.
Using the WebAssembly JavaScript API - WebAssembly
loading our wasm module without streaming if you can't or don't want to use the streaming methods as described above, you can use the non-streaming methods webassembly.compile / webassembly.instantiate instead.
WebAssembly
loading and running webassembly code after you have a .wasm, this article covers how to fetch, compile and instantiate it, combining the webassembly javascript api with the fetch or xhr apis.