I have a form at http://www.anhatweb.tk/web/auth/create to create a new user
But whenever i load the page a loader comes but we can see if i remove the loader HTML loads first and then the CSS loads....Is there any way that I can load CSS first and then load the HTML?
My code:
<html lang="en">
<head>
<!-- Basic Page Needs-->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>ABC</title>
<!-- Mobile Specific Metas-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSS-->
<link href="<?php echo base_url(); ?>assets/css/style.css" rel="stylesheet">
</head>
<body>
The HTML has to download first before the css can even start downloading because the location of the css file is stored within the HTML head tag. Because of the direction of this dependency, you can't really reverse it.
As #Daniel said, the best option you likely have is to "hide" the HTML until the CSS has completed loading. Lots of websites do this to avoid the flash of non-css that you're experiencing, it's pretty normal (and annoying to deal with).
I would give just hiding the elements until the onLoadCompleted is called. If you still see the flash after that, I would load the stylesheet manually on the onLoadCompleted (it should be executed at runtime instead of async) and then show the elements.
No, the browser fetches the HTML, parses the Markup and when it comes to an external resource (css or javascript) it will load this.
After loading the external resource the browser will continue parsing the Markup.
Related
I want to use a PHP include for the section. I have an index.php and a head.html in which I have the usual stuff: title, etc plus a link to bootstrap CDN, and a custom CSS file.
Upon testing, the styles from Bootstrap work fine but my custom overrides aren't. I was under the impression custom CSS files automatically override bootstrap? This has worked for me in the past when linking to them traditionally on every page of the website. However, I want to use PHP includes to save time.
I've played around with the order of things (i.e. Bootstrap first, custom CSS first etc), I've tried linking to the custom CSS file separately (outside the include) but can't figure it out.
Any ideas?
My code below:
index.php
<!DOCTYPE html>
<html>
<head>
<?php include("includes/head.html");?>
</head>
<body>
<div class="jumbotron paral paralsec">
<h1 class="hero-heading display-3 text-dark">Some text.</h1>
</div>
</body>
</html>
head.html
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Site Title</title>
<!-- Bootstrap CDN below -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<!-- Custom CSS below -->
<link rel="stylesheet" type="text/css" href="CSS/customCSS.css">
<!-- Font Awesome below -->
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Google Fonts below -->
<link rel="stylesheet" type="text/css" href="#">
customCSS.css (only contains one h1 style, for testing)
h1 {color: white}
Folder structure:
CSS (Folder)
customCSS.css
includes (Folder)
head.html
index.php
Ordering of CSS files plays a less important role than most people think.
When there are multiple rules targeting the same thing, specificity is the most important factor. Higher specificity almost always wins.
When selectors have an equal specificity value, the latest rule (last one called) is the one that usually gets applied.
There's a lot more info on this topic here: https://www.smashingmagazine.com/2007/07/css-specificity-things-you-should-know/
thanks for the suggestions.
It turns out I was experiencing a CSS caching issue. My browser was auto-loading an outdated version of the CSS file. The PHP include and and CSS link were working normally.
If any others come across this thread and are looking for the solution, see here:
https://css-tricks.com/can-we-prevent-css-caching/
Thanks again
Tom
I have a major issue with my page load method, whenever my page start loading I can see HTML before loading of the page in proper manner.
There I am using cache for HTML, CSS and JS to serve on page for speed, the speed is fast now, but really its looking weird when we can see broken HTML at the time of page load.
I have tried multiple things:
1. Tried unminified CSS
2. Tried JS to show a blank page before full page load
3. Tried uncached CSS
4. Tried to show percentage on page load
But not got success, the issue appears only for miliseconds before page load then start showing percentage or whatever I am trying, but before all of the solutions once it is showing the bad mannered HTML.
Please give me suggestions, why it is appearing with valuable reasons and what exact reason behind this.
Click here to view problem when site loads
The reason you are seeing your unstyled HTML load first is simply because your stylesheets are not getting loaded first. You need to place your external stylesheets in the head section of your HTML so that it gets loaded first.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!-- Load your style sheets here -->
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
</body>
</html>
Is there any method to cache an HTML-code of ExtJS components with further initializing it (binding events and so on) so that I can send it by PHP inside one solid HTML file?
In other words I want server to send already pre-rendered page.
If your idea is to capture the memory state of the client application that seems like a bold project, to say the least. See this other question.
If what you want is to have all you application embedded in one single HTML file, that is possible. Just concatenate all you Javascript (including Ext's code) and put it in a script tag, and do the same with the CSS and wrap in into a style tag.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>title</title>
<style>
/* All your CSS here */
</style>
<script>
// All you javascript here
</script>
</head>
<body>
<!-- page content -->
</body>
</html>
Obviously, if you care about the maintainability of you code, you should automate this procedure...
Maybe its a stupied question but i didnt fild any answer for it,
If i have file with the html tag head tag&meta.. and I include him in all my web page, its effect the seo of the site?
I have file named "start_html.php" that have this code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="description" content="bla bla.">
<meta name="keywords" content="bla bla">
<meta name="author" content="bla">
<title>bla bla</title>
<!-- CSS: -->
<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
<!-- JavaScript -->
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
I start every page with this line: <?php include('start_html.php'); ?>
When i check for code error on w3c validator its says that i dont have those tags so the page is not coded good.
If the code from that file is not being displayed in your web page then obviously your PHP code is incorrect and that file is not being included. You need to make sure you have error reporting on and displaying all errors as this will catch this for you.
See this StackOverflow question for how to enable error reporting.
You should have these meta and title tags on all your pages, so including them from PHP is certainly not a bad idea.
However, if the W3 validator tells you these tags aren't there, you should check your output. Perhaps start by 'show source code' in your browser, and see if the tags appear there.
If you try to send your source file for validation, where you have:
<?php include('start_html.php'); ?>
Of course you will get the expected result - no tags, because the source file must be parsed and handled by PHP.
You can give a working link for validation, or copy output in your browser after execution, save the file and send it.
I am creating my portfolio site and I am wanting to include the head section as a php include on my page. Reason being is because the site will have a fair few pages and I will want to make changes later on to things later on like tidying up the css files.
For example;
<head>
<?php include('head.php'); ?>
</head>
as opposed to all this below being shown on each and every page:
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/1140.css">
<link rel="stylesheet" href="css/ie.css">
<script src="js/vendor/modernizr-2.6.1.min.js"></script>
</head>
I just didn't know if this was good practice to do, as with this being my portfolio site, I need the code to be correct from the start also as they will probably look into the standard of it also.
What are your opinions and advice people? Thanks.
Yep, it's quite standard. But instead of writing:
<head>
<?php include('head.php'); ?>
</head>
you should put the tags inside head.php. I say it's better because what's inside head.php has no sense without the head tags, so they are kinda linked together. It's good practice to join things so linked into a single file without having to repeat open and close head tags for each page.
Actually, it's even good practice (and commonly used) to have header.php, body.php and footer.php files that has respectively:
header.php
<html>
<head>
...
</head>
<body>
body.php
...
footer.php
</body>
</html>
I'm doing that in my application but I've found that it's not a good idea, because you have many of your stylesheets, javascripts, etc in a php file including the head section and you'll have problems with including it in php files in nested folders. this problem is because of relative paths.
If you can use absolute paths then it's ok otherwise it's not a good idea ...
PHP Includes are used like this all the time. Any time that you have content that will be the exact same on every page, it is very helpful to use an include
This is an old topic but I use
<?php include_once("phpinclude/head.txt"); ?>
phpinclude is it's own folder and I keep the footer, header, and common place info in that folder. .js, and .css has it's own as well.
Edit: I use require now. I would rather have a code fail and die rather than give some random string. They are the same except one dies and the other will print out an error or random code. This is for people learning PHP, not old heads.