I have a site that loads CSS and fonts from Google Web Fonts. However, one place where the site will be used is a local intranet with no Internet access.
I still want to use the fonts from Google where I can for the benefits that Google offers, such as the fonts being downloaded from a CDN and possibly already being cached on the user's computer from visits to another site that uses them.
I also use Google-hosted jQuery and I use the following code (from HTML5 Boilerplate) to load jQuery from my server if Google is not accessible:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.9.0.min.js"><\/script>')</script>
I am looking for a way to do the same for CSS files.
I have used <img src="..." onerror="..." />
in the past for handling images that don't load, so I was wondering if I can use that for stylesheets that don't load too. I did a quick test in a few browsers, using <link href="..." onerror="..." rel="stylesheet" type="text/css" />
, and the onerror
was executed in all of them, but I would like to find out if I can expect this to work consistently in all browsers. Or is there a better way to do it?
I saw several other answers here that discuss watching the document.styleSheets
collection, but that sounds like much more of a hack than this does.
Note: This is really more of a "is this practical and do people use it"-question than a "what does the spec have to say about it"-question.
The onerror attribute fires when an error occurs while loading an external file (e.g. a document or an image).
onload is an event specific to the body , frame , iframe , img , link , and script elements.
The onerror event is triggered if an error occurs while loading an external file (e.g. a document or an image). Tip: When used on audio/video media, related events that occurs when there is some kind of disturbance to the media loading process, are: onabort.
What are the three information provided by Onerror () method? The onerror() method These are: Error message – It is the same message that the browser would display for the given error. URL – It is the file location where the error occurred. Line number – It is the line number in the given URL that caused the error.
I believe the list of supported events on <script>
and <link>
at pieisgood is what you're looking for.
As you can see, onload is the most widely supported for <link>
which is very lacking in working events. But you could try to implement an error event by having onload clearTimeout
for some function that assumes an error happened.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With