In page load start-up Google Chrome show me just page layout (like blew image) and after one second inject content like text and font-icon and etc.In your opinion, this problem related to my html, css or js? or Do you have any suggestion to resolve this problem?
Related
I have made some modifications to a website I am working on and now, when I load the homepage, the header image seems to load after the rest of the page leaving a white space and then the image loads it pushes the rest of the page down to where it should be. This site is created from scratch with HTML, CSS and JS. The website is https://www.visionwebdesign.ca so you can have a look. Once the webpage is in the browser cache, it loads fine.
The header is actually a part of a carousel of images. Here is the code I am working with:
Vision Web Design
...
I have tried reducing my images to a smaller size but no luck there. Looking for any help available.
J.P.
This is probably not the answer you are looking for, but looking at the HTML page code it appears you are just loading in the images quite normally using IMG tags, no script code in use there, so any delay may simply be the time it takes for the images to download from the server to the browser. I saw just a bit of a delay in loading the header image (tried in both Firefox and in Chrome) but I'm on a 300Mbps down internet connection so everything is fairly quick.
Image size may be one thing to look at. Alternately setting the content DIV to display:none until after the first image has loaded then switching it using Javascript. I found this example here at Stack Overflow:
A method of solving this problem would involve hiding the full body for the 2 seconds or however long it takes to load the body. We can do this using Javascript:
var timeouttimer = setTimeout(showbody, 2000);
var everything = document.getElementById("allcontent");
function showbody {
everything.style.display = "block";
}
And then in the HTML add the following div surrounding all the content of your webpage:
<div id="allcontent" style="display: none;">
I recently discovered a bug with gravity forms and I was wondering if you guys could help me and the community.
So, the problem it's with HTML content. I attached the images here. Basically, everything works just fine, when starting a new form, the HTML content it's displayed accordingly.
https://ibb.co/DRJrCzw
But when someone goes to the next page and then comes back to the first one, the content it's displayed like in the image nr.2.
https://ibb.co/Qrz8Wbd
This fixed it for me!
JacKrac (https://www.reddit.com/user/JacKrac/)
Assuming you are a paying customer, have you reached out to support?
With that said, I believe it is because you are using shortcodes in the text.
The second time you visit it, the form content is likely rendered a different way compared to when the page first loads, likely with an Ajax request and/or javascript the second time around and the shortcode is not being processed.
One thing to try would be to copy the generated HTML and paste that into the HTML block in gravity forms, removing all the shortcode.
So, basically:
Open a text editor and save the current content you have in Gravity Forms, so you have a backup of it.
Open a page to view the form and then use your browser's HTML inspector to copy the HTML
Paste the HTML into gravity forms
If that fixes it, I would still reach out to them and ask them about how shortcode is handled within the html block and also let them know you think you found an issue.
When a web page loads, does the content with display:none affect the load time?
I have a huge list in html with about 600 links assigned so the html page alone comes to around 450kb(excluding images~150kb), while the stipulated size of a page according to our server is 300 kb.
But the lists are divided into 4 main lists which toggle between display none to visible.
i.e.when list 1 is visible others are hidden.and so on.
So I was wondering how the load time of the html page would be affected by this.
Thanks.
Yes,It does affect the load time.
I too tried this on my own website,It took some time to load.even if the div was hidden
I suggest you to load it dynamically,using jquery or ajax ,put all those menu item or what ever images in a separate html file,and call it whenever required.
Save's load time but More Coding
Yes, because it is loading the full html. You can see the html code in the browsers code inspector. And you see the images in the hidden-tags was loading.
You can prevent this by using javascript. Only load the images when clicking the active tab.
Yes, it does. The browser loads html and parses also the hidden elements. They are also part in the internal "element-tree" of the browser. Otherwise you wouldn't be able to reference them e.g. via JavaScript to modify them.
Yes of couse it affects the load time visibility in the DOM. The ammount to download is still the same.
To improve this you could use:
Pagination (will_paginate in Rails, https://github.com/onassar/PHP-Pagination php)
Infinite scrolling(will load the content dynamically during scrolling)
AJAX loading of the lists
I have a personal website, which I have made (to the best of my ability) without a template. I am not very experience in HTML so am not entirely sure if this is bad practice or not, but here is my issue.
My website consists of a frameset, which has 3 frames. Two do not change (banner and nav panel), and the other is content. The way I display my content in the main frame is through an iframe. Here's where the trouble comes. I have suggested my website to the crawler, and it crawls all the pages for content, of course. When I click on one of my links suggested by google (say, a project), the browser loads that individual .html file, without any of the rest of my frames. In other words, it does not link to the page through my index.html which sets up the formatting and page frames, but simply loads the html as a stand-alone page.
Is there a way I can avoid this, so that if a link for my website is clicked from an external link (not from my domain), the page first loads my index.html, and then the page of interest, so that it appears as if it were accessed normally from my index? I am not sure whether I should find a new way of displaying my content in the main frame so that it avoids iframes, or just need a simple script to redirect the user.
Not sure if it's useful but I've attached a photo of my page just to better explain what the frame layout is that I am working with.
Many thanks!!!
iFrames are definitely not the route to take when you are displaying consistent content... Which from what appears to be the Navigation, Header, and of course, the Content. Of course there will be an issue when a "Search Engine Spider" crawls your page... From my understanding, seeing as you are calling "content" from another page, the spider will crawl that page but will not crawl the index.html page we are currently viewing. When a "Spider" crawls a page it looks for STATIC HTML Tags/Content/Keywords/etc, and seeing as you are calling all of your content from other pages the "Spider" will treat that content as being on another page as well.
You want me recommendation? Avoid using an iFrame at all times. The point of an iFrame is to display content from another location (external), and or display static content on a page without having to scroll the current page you are viewing the iFrame on.
It is bad practice to use an iFrame, I would suggest using DIVs. Within these DIVs you may place content, images, links... Virtually anything you want, with all of the benefits of having people view your website, along with Search Engine Spiders.
I hope this helps!
Thanks,
Aaron
iFrames are a bad choice. AJAX is VERY simple these days. Just replace the big iFrame with a Div, and AJAX a page, putting the contents into that Div.
Replace your anchors with tags, and replace href with name, like so:
<div name='main.html' class='link' />
You need a div with the id 'loadHere':
Then include jQuery (it's pretty easy, google it) and at the end of your HTML put this:
$('.link').click(function(){
$.post(this.name,function(dat){
$('#loadHere').html(dat); }); });
I've created a toolbar in html that I need to be able to load of any given webpage; I'm thinking of loading it on the page through the use of a bookmarklet but I can't quite get my head around how I go about doing it.
An example of what a need to happen is as follows.
I navigate to any webpage on the internet, I click the bookmark for my toolbar and it appears at the bottom of the page without affecting any of the content on the page, it will stay fixed even when scrolling.
I've added a picture of how the toolbar will look, any suggestions on how I can implement the required functionality?
http://d.pr/bVeM
Many Thanks
What you will need to do is use CSS to keep it at the bottom. Basically you stick your toolbar html code in a <div> tag and then use CSS to keep it at the bottom. Try reading this link or this link on how to do it
Create a script file that you can host somewhere (if it's just for you, you can use localhost). In that script build the toolbar. Your bookmarklet will look something like this:
javascript: document.body.appendChild(document.createElement("script"))
.src = "http://myserver/myscript.js"; void 0;
It wraps here for readability. It won't wrap in your bookmarklet.
The javascript: tells the browser you are executing a script. The void 0 at the end prevents the page from navigating to the return value of the JavaScript.