Ok so I have a bit of a problem. I am using a template home page. A top Navigation Bar, Side Navigation bar and a "#Content_Area" div
To avoid loading and reloading tons of standard JS libraries
bootstrap-datepicker.js,
bootstrap-editable.min.js,
bootstrap-wizard.min.js,
bootstrap.min.js,
docs.min.js,
jquery.min.js,
moment.min.js,
rowlink.js,
select2.min.js + all the css
each time a user just navigates to a different page (that use the same exact template) I am just reloading the content area with jQuery .load() function. It works perfectly, with some cool fadeIn() and fadeOut() effects on loading (which I really like).
Say a user goes to Link A. That loads the contents of A.jsp
Then goes to Link B. That loads the contents of B.jsp
So far so good, the Major Problem is if he goes back to A and A has some custom Javascript. The browser created a temp js file 1.js (confirmed with Firebug) then on the second visit (the page did NOT reload at all) it created a second temp file 2.js containing exactly the same code, resulting in nothing working on the second visit.
How do I get rid of those temp files when emptying the div?
Related
I think this question was asked in a similar form before but I didn't get a clear understanding how to implement it properly.
I have a site, which has different pages on their own urls, like '/contact', '/about', '/products'.
What's the technique to put a top bar on the top like this one http://nanobar.jacoborus.codes/?
Here is what I need:
User clicks a link on the page.
JavaScript handles the click, shows the progress bar, starts growing it then passes the event to browser.
Browser starts loading the page. At this moment, page clears and becomes white and blank.
As the progress bar was in some position that is not zero, say, 63%, and now there is no information on the new page about where it was.
So, I can technically run some function on every page, like showGrowingProgressBar(value), but since I don't know where it left, I cannot put it in the same progress state as where it left.
How do I make it look natural, like the user didn't leave the page, but more like an SPA experience?
I guess you want to build an one page web application where things load in the same page without refreshing.
You can use AJAX to do this. you can populate a particular div with the new html without refreshing.
It can be handled more easily using Angular JS. You can define routes for every page and can also have templates for different page, and can load that template when user clicks on the link. It will just replace the container div with new html codes and you can also handle the urls easily.
Turbolinks seems to be what you are looking for. It dynamically loads your pages and shows a loading indicator.
Turbolinks makes navigating your web application faster. Get the performance benefits of a single-page application without the added complexity of a client-side JavaScript framework. Use HTML to render your views on the server side and link to pages as usual. When you follow a link, Turbolinks automatically fetches the page, swaps in its , and merges its , all without incurring the cost of a full page load.
Your approach is:
User clicks a link on the page.
JavaScript handles the click, shows the progress bar, starts growing it then passes the event to browser.
Browser starts loading the page. At this moment, page clears and becomes white and blank.
As the progress bar was in some position that is not zero, say, 63%, and now there is no information on the new page about where it was
Your approach should be:
User clicks a link on the page.
JavaScript handles the click, browser starts loading the page. At this moment, page clears and becomes white and blank.
New page shows the progress bar, starts growing it then passes the event to browser. The growth can be picturized by the no. of API call completed divided by total no. of api calls, required for that page.
How would one go about staying on the CURRENT page until the NEXT page is fully loaded.
I've experimented with stuff like making the body
<body style='display: none'>
And then displaying it with Jquery upon full load but that's not what I'm looking for.
I would like for the user to stay on the current page (probably display a loader graphic BUT keeping the content of the current page - no blank pages etc) while the next loads and then.... BAM you pop the full page for display. Otherwise the page jumps around as it loads.
all tutorials or plugins do either the above or some like http://github.hubspot.com/pace/docs/welcome/ show a loading bar on the NEXT page while it's being fully loaded... but this still lets you see the elements jump around.
YOUTUBE has this (same as pace above) BUT it stays on the CURRENT page, shows the loader and then moves on to the next whereas pace goes to the next page and then shows a loader while the rest of the page gets loaded.
I hope I am making sense.
Thank you.
you need to use AJAX to load the page.
I think this is a good tutorial on how to do it: http://tutorialzine.com/2009/09/simple-ajax-website-jquery/
There is a need to have a takeover page when users visits the website e.g. www.domain.com and instead of displaying the contents immediately a splash page is displayed. They then have the option to visit the home page by clicking on a link.
Is there a way to do this without changing the code on the home page with the exception of including a javascript file that accommodates the requirements i.e. takeover the page with another HTML page?
Is there an example I can find that does the above?
You could do a DNS "rewrite" to an other IP and on the other Webserver you capture or simple copy/paste the original HTML contents and show it but also add this HTML splash notice.
But there is no way of adding a splash page without changing the content of the page or having access to the code.
If you have access to the HTML code, you can include a JavaScript file on which you have access, maybe also on an other server. Also add one noscript tag for visitors without JavaScript disabled.
Example:
<script src="http://www.asdf.com/you/have/access/to/this/file.js" type="text/javascript" />
<noscript>SPLASH NOTICE</noscript>
How the file.js should look like you can ask an additional question. Or check on G.
The good thing with this "remote" JavaScript file is, you can remove the splash notice later from the file without touching the original code again.
I am building a web application which I intend it to work like a traditional 'software': as few page reload, and page redirect as possible.
My solution to page reload and redirect is to have them as 'tabs' within the app, so when you click on another tab, the div of your current content will shrink to 0 width.
My question is: how do I prevent the content (writtent in JS, w/ PHP backend) in a tab to load unless when it's clicked on?
(Assuming this is what I should do to reduce unnecessary load)
Just don't load it until the link/button/etc. to the tab is clicked.
See also the jQuery tab implementations.
If your back-end is in PHP, you should control what you send to the client from there.
By the time the js gets the code, it is too late to control what not to load. You can hide it, or remove it, but it has already been loaded.
So, to reduce unnecessary load, and as a good practice, you should only send to the client the active 'tab'. That has to be done in PHP in your case.
I have a web application that uses quite a bit of JavaScript.
When the page loads, it's very clear visually that something is blocking the rendering of a particular portion of the web site. This portion is generated by a Tabber Tabify JavaScript library.
How can I determine what's blocking the HTML rendering specifically so that I can modify my code to prevent this blocking?
Can I use Firebug, or some other tool, to walk through my HTML/JavaScript to determine where the HTML rendering is being blocked and if so, how?
UPDATE:
YSlow gives my web-application a score of "A" and Page Speed give a score of 94/100.
UPDATE 2:
The live site is linked below.
http://www.elite.com
What I'm specifically referring too is the actual Tabs themselves being rendering (and NOT the panel content inside the tab panes). It seems strange to me that the Tab headings themselves are taking so long to generate on the first (empty cache) page load.
A few possibilities:
Loading scripts in your page will block rendering (the only fix for this is to put them in the head (blocks initial rendering) or at the end just before the </body> or load them after the page is loaded (e.g. onload)
Whatever the Tabber/Tabify tool is, needs time to process content... see if there is a way to optimize it.
Either way, if you post some code we can likely be of more help
Update:
If I load the page with my cache cleared, I see content rendering on the screen, then hiding (as it becomes hidden tab content)
Changing the non-visible content to display:none; when loading, and then only setting it back to display:block; once the Tabify stuff is done might help (a) speed up the rendering and (b) remove any flash of content that later gets hidden.
The RadComboBox'es you have load inline (which means the scripts block rendering)... if you can delay this until the onload event fires it will speed up rendering.
I would move the Unica Page Tag (tracking) to the end of your page too.
You have 8 external script files - if there is any way you can combine them it would be good.
You don't have gzip turned on for most of those script files
All of your static content (images, css, scripts) don't have an expires header which means they won't get cached, which means pages won't load fast after the first page.