I am struggling with a flash of unstyled content on my website. When first visiting it you see the unstyled content before it is actually loaded on to the screen:
You can see for yourself here: http://galaxynode.com
I am not fluent in html so I need some detailed help:
Here is my code:
<html lang="en">
<head>
<title> Galaxy Node Server Hosting | Premium Minecraft Hosting For $2.99! </title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css;">
<meta name="Author" content="Steve">
<meta name="Keywords" content="minecraft server hosting, dedicated server hosting, cheap minecraft server hosting, best minecraft server hosts, minecraft dedicated server hosting, online server hosting, free minecraft server hosting, minecraft server hosts, best minecraft server hosting, dedicated servers hosting, galaxy node">
<meta name="Description" content="Galaxy Node Server Hosting aims to provide the highest quality Minecraft servers at an extremely low price.
We have the best customer service of all Minecraft server hosting providers! You will not be disappointed!">
<body background="http://galaxynode.com/images/background.jpg">
<link rel="stylesheet" href="galaxynodewebsite_g.css" type="text/css" media="screen,projection,print"> <!--// Document Style //-->
<link rel="stylesheet" href="index_p.css" type="text/css" media="screen,projection,print"> <!--// Page Style //-->
</head>
<body>
// body content
</body>
</html>
Could someone tell me exactly what I can put in here to stop things from displaying until it is fully loaded? Any fix would be great! I do not know html so please tell me either exactly what I can put in here or something that I can understand without knowing much about html or javascript.
Remove <body background="http://galaxynode.com/images/background.jpg"> You have created another <body> tag.
you are essentially loading your stylesheets when the body is being loaded. You see the flash because the css properties haven't been applied. When the extra <body> tag is removed the stylesheets will be part of the <head> and will load first.
if you want to keep that background add a property in your CSS for the body. e.g.
body
{
background-image: url('http://galaxynode.com/images/background.jpg');
}
Related
I am having a simple markup.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="prefetch" href="page2.html">
<link as="script" rel="prefetch" href="./src/script2.js">
</head>
<body>
<p>Let's check</p>
Go to page 2 where script2 is there
<script src="./src/script1.js"></script>
</body>
</html>
Here I am prefetching the second script script2.js. It is prefetched successfully but when I click on page 2 link where I have my script tag script2.js, again script2 is downloaded it is not taking it from prefetch cache.
Here is the page2.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p>This is page 2</p>
<script src="./src/script2.js"></script>
</body>
</html>
Had similar issue and the cause for me was that I had disable cache enabled in Google Chrome.
You can see how to disable/enable caching in Chrome DevTools on this answer https://stackoverflow.com/a/7000899/2992661
I've been facing this issue for a while, just got a clue that HTTP header VARY will hurt prefetch cache. checkout the MDN description about VARY.
https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Vary
The Vary HyperText Transfer Protocol (HTTP) response header determines how to match future request headers. This information is required to decide whether or not a cached response can be served instead of requesting a fresh one from the origin server. This response header is used by the server to indicate the headers it used when selecting a representation of a resource in a content negotiation algorithm.
in my case, after i remove 'vary', the 'prefetch' script did load from 'prefetch cache'.
Built a site in MVC, including jQuery in the layout file like this:
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>#ViewBag.Title</title>
#Scripts.Render("~/bundles/jquery")
#Styles.Render("~/Content/css")
</head>
<body>
<!-- content -->
</body>
</html>
JQuery is referenced via nuget and bundled like this:
public class BundleConfig
{
bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
"~/Scripts/jquery-{version}.js",
"~/Scripts/jquery-ui.min.js",
"~/Scripts/stickyfill.js"));
}
And that works fine running the site locally in Visual Studio.
When I deploy to IIS and try to run the site I get the dreaded Uncaught ReferenceError: jQuery is not defined error.
The first thing I checked was that the jQuery package was available via the address the deployed page was trying to use:
/bundles/jquery?v=[a token]
Which it is. You can even see it referenced in the bundles from Chrome Developer tools. It may be worth noting that the css, which is deployed via the same mechanism with a token, works fine.
I've also worked my way down the answers to the question JQuery - $ is not defined and either eliminted or tried them, to no avail.
The only thing I can think of is that it's not loading before the initial call to jQuery(document).ready() - which is why I moved the bundle into the <head> tag. But that doesn't help, and I don't know what else I can do to slow or wait for page load.
What on earth else could this be?
EDIT: Somone asked for the head of the rendered page:
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>[the title]</title>
<script src="/bundles/jquery?v=[a token]"></script>
<link href="/Content/css?v=[a token]" rel="stylesheet"/>
</head>
try this :
public class BundleConfig
{
bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
"~/Scripts/jquery-1.8.2.min.js",
"~/Scripts/jquery-ui.min.js",
"~/Scripts/stickyfill.js"));
}
In the web app I am currently debugging, the index page looks something like below.
<head>
<base href="/">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="renderer" content="webkit" />
<meta http-equiv="expires" content="0" />
<meta http-equiv="cache-control" content="no-cache" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<link rel='stylesheet' href='u.css?1456217719620'></link>
<link rel='stylesheet' href='ll.css?1456217719620'></link>
<link rel='stylesheet' href='aa.css?1456217719620'></link>
<script src='c.js?NaN'></script>
<link rel="shortcut icon" href="/images/favicon.ico" />
<script src='ll1.js?1456217719620'></script>
<script src='ll2.js?1456217719620'></script>
<script src='ll3.js?1456217719620'></script>
<script src='ll4.js?1456217719620'></script>
<script src='ll5.js?1456217719620'></script>
<script src='ll6.js?1456217719620'></script>
<script src='aa.js?1456217719620'></script>
</head>
<body>
<!-- Edit: As suggested in one of the reply, could it be because there are scripts like this in body? -->
<script type="text/javascript">
(function() {
var u='//widget.uservoice.com/xxxxx.js';
var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
g.type='text/javascript'; g.async=!1; g.defer=!0; g.src=u; s.parentNode.insertBefore(g,s);
})();
UserVoice = window.UserVoice || [];
</script>
</body>
Some of the scripts appear twice from developer tools (Chrome, see image below)
Sometimes both are 200 instead of 304 for the second request.
Is this normal?
What could have causes it to sometimes appear twice and sometimes it only appear once?
[Edit 1] It is different from this question How "304 Not Modified" works? It doesn't always show 304, sometimes both are 200 response. And this could be related to how HTML and javascript is written, not off-topic as suggested by moderator.
Even nginx recorded the request twice
[23/Feb/2016:21:56:09 -0500] "GET /ll1.js?1456217719625 HTTP/1.1" 200 220276
[23/Feb/2016:21:56:09 -0500] "GET /ll1.js?1456217719625 HTTP/1.1" 200 220284
[Edit 2] I think it might has something to do with "Large" file request? because as seen in the image below, I tried to load several javascript files, and some of them are couple MB in size. I didn't do much in the javascript, most of the smaller files just contain "console.log()", the larger version is just "var xxx = ['Large Array'];"
If your Javascript code modifies DOM and add new <script> node then, browser will load new script pointed in src attribute. So it is possible. However second request may be served from browser cache if web server said that it is not modified (code 304).
tl;dr Try right clicking Tag Assistant extension icon > Options > tick "Ignore External Scripts".
Possible answer is that you are running Tag Assistant (by Google) extension. My experience today is that I'm adding a third party SEO <script> tag to our site by pasting their javascript snippet into our site, which does a fairly normal dynamic <script> tag creation and insertion into the head of the page (actually it inserts it before the first script tag found on the page, which may not be in the head, but never mind). I found that the script name appeared twice, one after the other, in the network pane.
I created an XHR breakpoint for the script name, and found it stopped in the tag_assistant_compiled.js file within the Tag Assistant extension, as it made a very deliberate XHR request to load the external script file. Looking up the stack trace showed it was acting on purpose but I couldn't really see why it needed to make the request. Checking the options for the extension I found the similarly named "Ignore external scripts" checkbox, and sure enough, ticking that and refreshing the page meant no second request was made for the script.
I'm developing a MEAN stack application (Mongo, Express, Angular, Node), and i want to share some pages on a Facebook fun page and have a personalised link like this one.
https://www.evernote.com/shard/s414/sh/6c61c036-abc6-4eb9-b355-41af05760979/45fce4c1795580266f1247dba3452d62/res/31e7a3bd-7258-4910-bb05-5e2e61cd2d96/skitch.png
I'm using dynamic og tags to show different data on shared link
<html itemscope itemtype="http://schema.org/Article">
<!-- Open Graph -->
<meta property="og:title" content="{{og_title}}" />
<meta property="og:type" content="article" />
<meta property="og:url" content="{{og_url}}" />
<meta property="og:image" content="{{og_image}}" />
<meta property="og:description" content="{{og_description}}" />
<meta property="og:site_name" content="MYSITENAME" />
<meta property="fb:admins" content="MYAPPID" />
These variable are retrieved from server by a $http.get()
I'm using also prerender.io server running on my EC2 instance (on port 3000), in order to allow my javascript pages to be crawled perfectly.
app.use(require('prerender-node').set('prerenderServiceUrl', 'http://'+ config.DNS +':3000/'));
Prerender is working fine, because when i type
http://DOMAINE.com:3000/http://DOMAINE.com/items/5376899f3230687806000016
i get a snapshot of the page and when i show the code source of this page i get correct data.
<!-- Open Graph data -->
<meta property="og:title" content="Pink floyd CD">
<meta property="og:type" content="article">
<meta property="og:url" content="DOMAINE.com:80/items/53763aad67afe39d05000017">
<meta property="og:image" content="https://fpid.s3.amazonaws.com/items/4748_DarkSideOfTheMoon.jpg">
....
My problem is when i share this url on Facebook
http://DOMAINE.com/items/5376899f3230687806000016
instead of getting a good link with image, title and description, i get this poor link
https://www.evernote.com/shard/s414/sh/ac398446-276e-46ae-bc1e-eab5fea5cc31/ac5339dc23b07ccaa853a0b9e86d4c4c/res/c99109cc-d038-4837-a303-dbb5f7ad376c/skitch.png
You are going to have to create a page that is rendered from the server via node that has the appropriate information. You can do this by checking for the facebook user agent and serving up a different page/route in node (instead of your angular app). This page only needs to display the og tags.
How to recognize Facebook User-Agent
Some background info to this problem:
https://developers.google.com/webmasters/ajax-crawling/
How it works with dynamic rendering:
https://prerender.io/how-it-works
and here are some services you can use:
https://www.google.com/search?client=ubuntu&channel=fs&q=angular.js+seo&ie=utf-8&oe=utf-8&gfe_rd=cr&ei=EBnSU-CNB6fc8ge-uIC4Aw
I am developping a web app for iOS and Android, using the last version of PhoneGap.
I want to send Notifications to the users on their phone's status bar, and I cannot figure out how to do that.
It seems that there was a Cordova plugin (StatusBarNotification) that once existed, but all the links I find are dead.
If anyone knows a way to send notif to the statusbar, I would be grateful.
Thanks
Quentin
EDIT : I should have been more specific : I am trying to understand how to use the status area on phones (http://developer.android.com/guide/topics/ui/notifiers/notifications.html), and for that I have a simple html file with a button. I want a notification to appear on the status area when I click the button. (like when you receive a text message, you have a notification).
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<title>Hello World</title>
</head>
<body>
<input type="button" value="Notiiiiiiif" id="btNotif"/>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
app.initialize();
btNotif = document.getElementById('btNotif');
btNotif.addEventListener('click', function(){
//There I want a notif to appear in the status bar
});
</script>
</body>
</html>
I am testing this app on my Nexus 4, with Android 4.4.2.
EDIT : I ended up using Google Cloud Messaging (gcm) for android devices and Apple Push Notification (apn) on my node server. This works pretty well with android devices, a bit harder for iphones
Perhaps its already to late for the answer, but I think this would make sence for your furhter work with notifications in PhoneGap. For using StatusBarNotifications in latest versions of PhoneGap (v3.x), you need to a proper Plugin that will work. This should be installed with Cordova CLI.
For the older versions of PhoneGap (v2.9 and below) you still can use DEPRECATED version of StatusBarNotifications from GitHub.
By the way, using of older version is less headache for not experienced developers :)
Hope this will help you.