I have two frames in my page. The upper frame is a jsp which takes the parameters entered by the user, the lower frame is a Crystal Report viewer which shows teh report once we click on View report button (located in upper frame). I do get a status bar on the bottom of the window (IE property). It is a back-end process carried out by Crystal Reports to process and populate the data in the report. I want a loading image or a message which stays until the report gets loaded. However, there is no pointer where the process is stuck on my jsp that i can monitor the starting or ending of the process. So, my idea is to monitor the status bar of Internet explorer. The moment it starts i want my image to get loaded in the centre of the screen and once the status bar is complete, the image should go away. I shall use something like setInterval(checkStatusBar(),500) which will check every 500 miliseconds for the existence of status bar. My question is what code would be there in the checkStatusBar() ? I need javascript code.
Instead, you might want to detect when the second frame's load event is fired. You can do this rather simply with some help from jQuery. Something like the following should do what you are looking for:
$(selectorForTheSecondFrame).load(function(){
stopShowingLoadingIndicator();
});
Where selectorForTheSecondFrame is a CSS selector that will select the frame you want to check and stopShowingLoadingIndicator is a function that does what you want to do once the frame has loaded.
Obviously, this would make your project dependent on jQuery. You could do the same in pure JavaScript if you wanted, it would just be a bit more work.
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.
Is it possible to cause Google Chrome to prevent painting... as in, to keep the page exactly the same, no animations or content changes.
The reason I ask is because I have created an extension for people who find it difficult to read webpages when things are animating/flashing/changing/etc.
It currently works by taking a screenshot and layering it over the page (position absolute, with a high value z-index).
But because captureVisibleTab cannot capture the whole page (issue 45209), the screenshot needs to be re-created every time the user scrolls the page.
However the change in iOS 8 Safari to not pause printing while scrolling got me thinking there may be another way around this by trying to emulate the pre iOS 8 behaviour (something I preferred, as Reader View does not always work, or stop animated gifs).
You cannot stop the execution thread, its browser who decides it.
However to prevent CPU Cycles What chrome does is, Pauses the javascript execution thread when window is blurred. But since you are showing captured with higher z-index you window will still be active.
One possible way :
Disable the script for that url when the page is loaded.
You might miss the dynamic content but as you asked "no animations or content changes". Any dom or style manipulations by javscript causes repaint of the page. Disabling it might be one solution. However not pretty sure about how to stop css animations.
I have also seen extensions that can capture full webpage image or pdf. you can capture the full page and show them irrelevant of whatever changing in the background
Looking for a cross-platform solution for this. I have access to an intranet site that does not implement auto-refresh. I tried this code, but it only refreshes the page once. I want it to refresh every 5 seconds, and from the server, not the cache.
javascript:void(setInterval(function(){window.location.reload();},5000))
Any tips are welcome.
Try this. It worked in Chrome, didn't test it anywhere else but I don't see a reason why it shouldn't work:
javascript:document.documentElement.style.height%3D%22100%25%22%3Bdocument.body.style.height%3D%22100%25%22%3Bdocument.body.style.margin%3D0%3Bdocument.body.style.padding%3D0%3Bdocument.body.innerHTML%3D%22%3Ciframe%20width%3D100%25%20height%3D100%25%20frameborder%3D0%3E%3C%2Fiframe%3E%22%3Bvar%20frame%3Ddocument.getElementsByTagName(%27iframe%27)%5B0%5D%3BsetInterval(function()%7Bframe.src%3Ddocument.location%7D%2C%205000)%3Bframe.src%3Ddocument.location%3B
Note: when you copy-paste this to Chrome's address bar it apparently strips javascript: from the beginning, I suppose for security reasons). Make sure to add it back.
Line by line:
// Making sure the document doesn't have margin or padding
// and it takes up the whole screen
document.documentElement.style.height="100%";
document.body.style.height="100%";
document.body.style.margin=0;
document.body.style.padding=0;
// Replacing the current contents with an iframe that
fills the whole document
document.body.innerHTML="<iframe width=100% height=100% frameborder=0></iframe>";
// Finding the iframe
var frame=document.getElementsByTagName('iframe')[0];
// Scheduling refresh in every 5s
setInterval(function(){frame.src=document.location}, 5000);
// Loading the original page in the iframe
// for the first time
frame.src=document.location;
I am new on add-on development using the SDK.
I want to ask you guys if it is possible to start my extension automatically after I open my browser? At the moment I starts after I press my widget icon in the toolbar (the panel shows a table with some data I get from the DOM).
Another thing I want to ask you: is it possible to show a loading screen (like a ajax gif) inside my panel (my extension needs a few seconds after switching a tab, to get the DOM data) every time I press the toolbar button.
First of all: One question per post, please.
Extensions are always started with the browser. When it comes to SDK add-ons, your main.js will be called. It's your job to perform any additional initialization form there.
Panels contain regular HTML pages and therefore can use images.
It's impossible to tell you more, without you providing more details and the code you got so far!
The timeline shown here (captured using IE’s F12 developer tools) illustrates how IE handles a page
where an <img> tag is located after of a bunch of text :
The second row shows the retrieval of the image. Since the image is small, all of the image data is included with the HTTP response headers in the same packet.
However - The next timeline shows what happens when the <img> tag is located close to the beginning of the file so that it’s in the first packet of data received by IE:
However, the request for the image starts shortly after the first packet of HTML arrives.
As a result, it takes less total time to retrieve the page and the image
But (IMHO) it is better to put images (with defined dimensions) on the bottom of that page. ( so that the page will load faster)
However - by my example it shows that the page is loading faster when the img is on top.
What am I missing ?
P.S. my question is a briefly summarized text of this section
You are missing several points.
First, the best practices are not only about downloading, but about rendering as well, because if the whole page is downloaded for 3s but in require another 2s to be rendered, the user waits 5s, not 3s. I don't know best practice for putting images at the bottom (there is such for scripts), the best practice I know is to include width and height attributes so you do not block rendering while the image is being downloaded.
Another thing you are missing in your test is parallel downloading, as browsers limit the number of concurrent connections and you are testing with only one image. Make your tests with more images, or best - with a real web page, in order to have reliable results.
I'd rather bother about lessing number of connections, - loading whole page at once. Split interface and content parts. Once interface loaded - it can ask user to wait and inform him about connection speed. Then put a progress bar and inform user about how things go.