HTML loads before CSS? - javascript

My code is loading the HTML before the CSS, so my site looks like a skeleton at first. After a second or two, the CSS kicks in and my site is rendered how it should be. Is there some way to have both my HTML and CSS render at the same time, so the site doesn't look out of order at first?
I have an external CSS file that is linked to my .PHP file. This is how the beginning of my code looks like:
<?php
require_once "../../universal.php";
?>
<!DOCTYPE html>
<html>
<head>
<!--UNIVERSAL HEADER CSS-->
<link href="/universal.css" rel="stylesheet" type="text/css">
<!--STYLE SHEET FOR THIS FILE-->
<link href="/entertainment/template.css?ts=<?=time()?>"" rel=
"stylesheet" type="text/css">
<!--STYLE SHEET FOR FOOTER-->
<link href="/footer.css" rel="stylesheet" type="text/css">
</head>

Related

I want to load specific stylesheet first in Html before other sylesheets and body loads. How to do it?

<head>
<link rel="stylesheet" type="text/css" href="css/style1.css">
<link rel="stylesheet" type="text/css" href="css/style2.css">
<link rel="stylesheet" type="text/css" href="css/style3.css">
</head>
<body>
All elements
</body>
<script src="js/jsstyle1.js"></script>
<script src="js/jsstyle2.js"></script>
<!-- begin snippet: js hide: false console: true babel: false -->
Here how can I load style1.css and jsstyle1.js first before other stylesheet and elements in body tag loads ?
Linked stylesheets will never be loaded before the <body> contents. If you want to load some CSS before the body is rendered, you have to put it in a <style> tag inside the <head>.
Same goes for the script. Plus, in your example, you put the <script> tags after the <body> tag, which means the browser won't even start loading them until it finished rendering the <body>. If you want your script to be immediately parsed and executed, you have to put the actual JS code in a <script> element in your HTML markup, again before any content inside the <body>.
<html>
<head>
<style>
/* Put contents of css/style1.css here */
</style>
<link rel="stylesheet" type="text/css" href="css/style2.css">
<link rel="stylesheet" type="text/css" href="css/style3.css">
</head>
<body>
<script>
/* Put contents of js/jsstyle1.js here */
</script>
<script src="js/jsstyle2.js"></script>
</body>
</html>

Best Performance for Importing <head> Tag Contents [closed]

Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 7 years ago.
Improve this question
I'm trying to determine the best way to go about importing a head.html file into the <head> tag for every webpage. I want to do this so that all resources are located in one file, to minimize bloat in other files, and also to provide an import for the header/footer on every page.
head.html
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Sample</title>
<link rel="icon" type="image/png" href="images/sample.png">
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="//fonts.googleapis.com/css?family=Andada" rel="stylesheet" type="text/css">
<link href="//fonts.googleapis.com/css?family=Lato" rel="stylesheet" type="text/css">
<link href="css/bootstrap-social.css" rel="stylesheet" type="text/css">
<link href="css/font-awesome.min.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="scripts/jquery-2.1.4.min.js"></script>
<script>
$(function () {
$("header").load("header.html");
$("footer").load("footer.html");
});
</script>
I've already considered JavaScript loading, but it's bad practice to import a JavaScript file right off the bat. Running the site through Google's PageSpeed Insights, it's suggested that you "Remove Render-Blocking JavaScript".
index.html head tag w/ JavaScript
<head>
<script type="text/javascript" src="scripts/jquery-2.1.4.min.js"></script> <!-- Blocking JavaScript -->
<script>
$(function () {
$("head").load("head.html");
});
</script>
<head>
I've also tried using HTML imports. This seems to work alright on desktop, other than the fact that an import brings in a full HTML document when rendered, wrapping the contents of my file in <html><head><body> tags. This is annoying and it is non-functional on my Android phone.
Rendered index.html head tag w/ HTML import
<head>
<link rel="import" href="head.html">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Sample</title>
<link rel="icon" type="image/png" href="images/sample.png">
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="//fonts.googleapis.com/css?family=Andada" rel="stylesheet" type="text/css">
<link href="//fonts.googleapis.com/css?family=Lato" rel="stylesheet" type="text/css">
<link href="css/bootstrap-social.css" rel="stylesheet" type="text/css">
<link href="css/font-awesome.min.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="scripts/jquery-2.1.4.min.js"></script>
<script>
$(function () {
$("header").load("header.html");
$("footer").load("footer.html");
});
</script>
</head>
<body></body>
</html>
</head>
JQuery is a terrible way to load the header content!!
You should be looking at PHP if you save your .html documents as .php
Then include these into the page using PHP includes in your index.php files.
index.php example:
<?
include('header.php');
<div>body content here</div>
include('footer.php');
?>
This depends upon what server-side language your server is running. If it's php, then do
<html>
<head>
<?php include('path_to_file/head.php'); ?>
</head>
<body>
</body>
</html>
You could also use include_once, require, or require_once instead. If your server is running something other than php, then you will have to use whatever the equivalent is in its language. If you have no access to the server and are running a completely static site, like off of Dropbox, Google Drive, or S3, then the best option I know of, if you have only a small amount of content, is to not include files but just run everything off of one base page with content that is hidden and displayed with javascript.

Linking multiple pages to single index.php page using PHP 'Include'

Im just practicing some things in PHP and have come across a problem.
I am linking multiple pages to single index.php page using PHP 'Include' function ( as i have read it makes a large site much more manageable and easily up-dateable'.
I have created external CSS files (3 in total, one for the navigation, page styling and wrapper content) and have a few external JS files which have all been linked to a PHP document named head.php. (below is the head.php contents)
The main page which the server will show first will be 'index.php' so for this page i am linking all the other segments which will all fit together to create the single page. (below is the index.php contents)
My problem is that in-between both the head and footer php include lines i have created a div named 'wrapper' (styles are already applied to an external CSS sheet named 'style.css' which is linked in head.php) (please see bottom for style.css contents) I would presume that when i view index.php in my browser (i am using XAMPP) that is should show the wrapper on the page, however i can not see the wrapper and i just continue to see the navigation bar only, i find this strange as i can use <h1> and <p> tags in index.php which are externally styled by the php included head.php page.
Please take a look at my code below for all the pages mentioned, I'm not sure what i am doing wrong here. Thank you
BELOW IS HEAD.PHP:
<!DOCTYPE HTML>
<HTML>
<HEAD>
<link rel="stylesheet" type="text/css" href="css/navigation.css">
<link rel="stylesheet" type="text/css" href="css/sitestyle.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"> </script>
<script type="text/javascript" src="responsee.js"></script>
<link rel="stylesheet" type="text/css" href="engine1//style.css" media="screen" />
<script type="text/javascript" src="engine1//jquery.js"></script>
<script type="text/javascript" src="drop.js"></script>
<script type="text/javascript" src="https://apis.google.com/js/platform.js"></script>
<title>MC SMM | Home</title>
</HEAD>
BELOW IS STYLE.CSS:
#wrapepr {
background-color:black;
width:1000px;
height:1000px;
margin:0 auto;
}
BELOW IS INDEX.PHP:
<?php include('segments/head.php'); ?>
<?php include('segments/facebookjs.php'); ?>
<?php include('segments/homenav.php'); ?>
<div id="wrapper"></div>
<?php include('segments/headbottom.php'); ?>
You have miss spelt your wrapper ID name in your stylesheet:
"#wrapepr"
Should become:
#wrapper

Load CSS file into head section or into HTML section without using Javascript

I have a web page in which I add a css file in head section using javascript code from the bootom of the page:
$(document).ready(function(){
var css=document.createElement('link');
css.type='text/css';
css.href='/css/user.css';
css.rel='stylesheet';
document.getElementsByTagName('head')[0].appendChild(css);
});
So I have a problem when user disable javascript then thic file can't be added to page so is there any way to include css file in that page using
<noscript>..Code..</noscript>
I can't add this file directly into my head Section.
So Is it possible to add css file into my html document without using
javascript?
with javascript:
$("<link/>", {
rel: "stylesheet",
type: "text/css",
href: "/styles/yourcss.css"
}).appendTo("head");
http://api.jquery.com/jQuery/#jQuery2
without javascript:
<noscript>
<link rel="stylesheet" type="text/css" href="myStyles.css">
</noscript>
you can try this:
<head>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
Yes it is possible to load css file without using javascipt
<head>
<link rel="stylesheet" type="text/css" href="user.css">
</head>
If you want to add css on the basis of some condition then use php if statement as shown below:
<?php if(YOUR CONDITION){ ?>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<?php } ?>
<noscript>
<link href="style.css" rel="stylesheet" type="text/css">
</noscript>
Now you can place this code in head section and it'll be called only when javascript is disabled.
Not sure how HTML compliant this is, but you can include a link within your body tag and still have it reference the class, given that you cannot edit the head section as stated.
Doing this did work for me, referencing the 'class1' from the style.css file
<head>
</head>
<body>
<div class="class1"></div>
<link href="style.css" rel="stylesheet" type="text/css">
</body>
Edit: in HTML 4.01 it is not acceptable, however using HTML5, this is perfectly acceptable markup. If referencing a larger CSS file this may cause some elements to be without style temporarily as the head section is intended to load such documents prior to displaying content, however if this is not a possibility, then this may be a solution for you.

Adding bootstrap in HTML

I'm going to use bootstrap to build up my front end. Also I'm using JSP and JSTL
What I've read in some articles over the internet is the proper approach of adding an external javascript file should be written before the body closing tag for more optimization of the page. Now I'm trying to apply this with the bootstrap, what i did is put the css of the bootstrap to an external html file:
import_header.html:
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="bootstrap-css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="bootstrap-css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="bootstrap-css/bootstrap-responsive.css">
<link rel="stylesheet" type="text/css" href="bootstrap-css/bootstrap-responsive.min.css">
which I imported to the head of the html like this:
<jsp:include page="import_header.html" flush="true" />
Now I want to do the same thing with the js file of the of the bootstrap and the jQuery lib but I don't know what is the proper way of doing this.
that's the recommended way, how to place them:
e.g. footer.html
<!-- Placed at the end of the document so the pages load faster -->
<script src="jquery/jquery-2.0.3.min.js"></script>
<script src="bootstrap/bootstrap-2.3.1.min.js"></script>
<script src="myOwn.js"></script>
</body>
</html>

Categories