I am trying to add preloader to my HTML pages but it isn't showing any preloader? I even copy-pasted the codes and CSS from web resources like codeopen but it isn't showing anything. If someone experienced the same and tackled the situation then help me.
<link rel="preload" href="https://ajax.cloudflare.com/cdn-cgi/scripts/7089c43e/cloudflare-static/rocket-loader.min.js" as="script">
Will Preload an javascript file with the as html tag. Don't forget that!
Then later in your html, it will be used at preload cache often.
Related
Hope you're all well.
Recently, I started coding in visual studio code as I'll be changing my career to software development, and as I began with HTML and CSS, I stumbled upon a couple of issues.
The most irritating one so far is a favicon issue. I've done everything I can and favicon still won't show up on my demo website. I even cleared the cache, checked the route path before writing the code, but nothing would help.
I saved the favicon image in the folder named "images" in my main folder called VSCodeTraining. I put the following line under the <head></head> and still nothing happens:
<link rel="shortcut icon" href="images/favicon.png" type="image/png">
As I am working on a Mac, is there maybe something to do with the fact I'm not importing it from the Mac's main folder?
Thanks for your help in advance and sorry for the stupid question.
I am aware that in HTML the way to reference stylesheets is something along these lines:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" >
But what is the stylesheet reference for MDboostrap. I have looked all over the website and I can't find it and the website says that all the resources are free. Have I got to install something?
I did a quick research and I could find that you can download MDBoostrap or use the CDN. Links bellow:
Download page: https://mdbootstrap.com/docs/jquery/getting-started/download/
CDN examples: https://mdbootstrap.com/md-bootstrap-cdn/
I have a problem with the advanced website manager that I am currently using, and that is that it does not allow me access to the HEAD tag, therefore I cannot set a FAVICON on the website. I would like to know if there are other alternatives to insert a favicon on the website without changing the HEAD code. The website lacks the appropriate tag to insert a favicon.
I know it can be a little crazy, but thanks anyway...
You will be able to insert a <link rel="favicon"> by adding a short javascript just before the closing body tag (</body>):
<script>
let faviconLink = document.createElement('link');
faviconLink.setAttribute('rel', 'favicon');
faviconLink.setAttribute('href', '/path/to/favicon.svg');
faviconLink.setAttribute('type', 'image/svg+xml');
document.head.appendChild(faviconLink);
</script>
The example above uses an SVG favicon, but you can just as easily use another image format with another MIME type:
PNG: type="image/png"
GIF: type="image/gif"
You can add a favicon.ico file to the root directory, browsers will still check for it even if it’s not defined in the <head>.
BTW, this is a great site for generating all the various app icons and associated code https://realfavicongenerator.net
Has anyone tried successfully to reduce loading times of Typekit by using preload or prefetch? i.e.
<link rel='preload' href='...' as='font'>
<!-- and/or -->
<link rel='prefetch' href='...'>
Is it a practical or possible in the current Typekit loading setup?
You could try preloading Typekit's script:
<link rel="preload" href="https://use.typekit.net/[YOUR_KIT_ID].js" as="script">
I've tested this and it does seem to work. The 'loading order' of waterfall changes — the Typekit script moved up to tie second with my main (deferred) javascript file. As for performance, I'm not seeing much improvement — if any at all.
As of today, link rel='preload' is not implemented by any browser.
I have tried using link rel='prefetch', and Chrome did prefetch that font, however, it ignored the prefetched font and downloaded it again when it needed it.
I am trying to include Google Fonts in my Moovweb site via #import url(http://fonts.googleapis.com/css?family=Oswald:400,300,700); and then including the tag 'Oswald' in font-family. I have done this before with static sites, but for some reason it is not working for me. I am not sure if I am placing the code in the right file? Seems like a simple fix, if someone could provide some guidance it would be greatly appreciated.
Why are you using #import ? Can you not create the link tag on head of your file?
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>
Is there any message on the console?