How to check progress of pageload? - javascript

How can I check the window load progress?
I know there is a jquery event for when the page fully loads but I also want to be able to track the percentage of its load progress.
Something like (just pseudocode)
$(window).load_change(function(){
set_progress_bar(window.load_percentage);
});
and this will get the progress of the page load and change the progress bar accordingly.
Is this possible?

To see how much of the DOM is loaded, you can strategically check for the existence elements on the page. The following post is a good reference for doing so, but simply having an array of the IDs of the elements you want to check and then using setTimeout() to call an update function every 200ms or something should allow you to see what has been loaded and update your progress bar accordingly.
How to check if element exists in the visible DOM?

As Hanlet mentioned, there are some commom scenarios that this can be used:
You have a website and your page has a lot of images;
You have a web app and your page has a lot of processes or ajax requests; or
Both.
For number 1, I've seen people using image pre-loaders with two major benefits, first is that when page loads, all the images will just be there, and second is that images are usually the heavier part of a page load, so a basic percentage calculation on these would almost illustrate it. A simple javascript image pre-loader algorithm would loop through every img tag that are on the document and create an Image object, setting its src atribute before inserting it on the page.
For number 2, I would make a observer-like Progress object like this:
var Progress = {
processes:{},
// Adds a process to keep track on
addProcess:function(name){
this.processes[name] = false; // false for non-completed
},
// Sets a process as completed, calls redrawProgress
setCompleted:function(name){
this.processes[name] = true;
this.redrawProgress();
},
redrawProgress:function(){ /* Updates the progress bar */ }
};
And then, inside each process, you should register it in the progress bar with the Progress.addProcess('myprocessname'); and call Progress.setCompleted('myprocessname'); when it finishes.
For number 3, I would try some way to know all the page's requests (including images, ajax data requests, external javascript calls, and the other processes), and mix it with the Progress object solution in number 2, but I never tried this one.

Related

How to initialise a lightbox

I tried to use a page on
http://dimsemenov.com/plugins/magnific-popup/
to start with the project. So I took the code an assumed to find out, what I need from the larger page for me. Though, cutting anything away made id not function at all.
What resources are needed (css, js, links)?
I need on several pages a light box and want to load the first picture as soon as the page loads. Tried to build a test page on
http://grillparzerhof.at/magnificversuch/index.html
though there is a light box not at all. It is a very beginners question; please help.
~ Karl
This is the code on that page in Public Methods you should use to fire the lightbox on page load, this instruction is near the bottom of the Documentation page:
// Open popup immediately. If popup is already opened - it'll just overwite the content (but old options will be kept).
// - first parameter: options object
// - second parameter (optional): index of item to open
$.magnificPopup.open({
items: {
src: 'someimage.jpg'
},
type: 'image'
// You may add options here, they're exactly the same as for $.fn.magnificPopup call
// Note that some settings that rely on click event (like disableOn or midClick) will not work here
}, 0);

jQuery: Reload a DIV which was already loaded by AJAX (without url)?

I load a div by a simple
$('#thediv').load("theurl/param1/param2/param3");
The params differ - and I grab them from different points - depends on where the user clicks. (Different filter options..)
Now I'm searching for a simple way to reload this content with the url it was actually loaded - to avoid searching for the right filter params at this place. It is possible?
jQuery will not "save" the source of information on its own, but it is possible to specify it manually using the .data() method alongside the initial .ajax()
This means during the initial load, you can associate a URL with a div by saying something like .data("source-url","MY URL GOES HERE")
After that, you can look up that information the next time you want to reload it by using .data("source-url")
For Example:
function reloadDivs() {
// Look up all of the divs that we might want to reload
$("div.reloadable").each(function(i,el) {
// For each div, check to see if the source-url was set
// If it was set, re-run the ajax call
var $el = $(el);
if($el.data("source-url")
$el.load($el.data("source-url"));
});
}
$(function() {
// Set the initial source, change mypage.html to your actual source
$("#example-div").data("source-url","mypage.html");
$("#refreshbutton").click(reloadDivs);
});
Hope this helps!

How can I get an element's innerHTML to update immediately?

I have a web page with a text box. When entering in a .js file name into the box and clicking the Execute button, the file given will be loading via AJAX and eval()'d.
Also on this page is an empty <div> for used as output. If the file that is loaded needs to print something to the screen, it adds it to the div's innerHTML.
When adding text to the innerHTML, it usually doesn't render on the screen until the Javascript is completed, which is fine, except for the fact that, sometimes, the Javascript file performs heavy calculations which can take upwards to a minute to complete, and it would be useful to be able to see the output as it was executing.
Is there any way to "refresh" the document?
I would try solving this using setTimeout.
function performInitialHtmlRender() {
/// This sets the innerHtml that you want the user to see
/// While you are performing the calculations
}
function performExpensiveCalculationsAndRender() {
// This is the really expensive function that
// you want to run once the browser has rendered
// the initial HTML
}
performInitialHtmlRender();
setTimeout(performExpensiveCalculationsAndRender(), 0);
You can use setTimeout:
div.innerHTML = html;
setTimeout( function(){
doHeavyCalculations();
}, 35);
http://jsfiddle.net/YKEKK/

loadmask in sencha touch2

I want apply load-mask in view page. while launching the application, some view pages are taking time to load data later it will display, so if its taking time to load in that time i want show load-mask to users with some messages like "loading....". from some sample i have applied load-mask, but it is shows that message every time whenever i hit that page. this is bad way because here setting time. i need apply load-mask like this if don't have data it should show the load-mask to the user, until page getting the data. please any one help me. how to achieve this one
My code is here: at controller level i am taking the id of load-mask and setting the property as shown below code
onCompanyPageLoad: function () {
var loader = Ext.getCmp('mask');
loader.setMessage("Loading...");
loader.setIndicator(true);
loader.setTransparent(false);
loader.show();
setTimeout(function () {
loader.hide();
}, 1000);
}
The answer of user978790 is formal way to show and hide a loading mask in Sencha Touch 2.
If you can't make it work, it's very likely that you're doing something like:
Ext.Viewport.setMasked({xtype:'loadmask',message:'your custom loadmask'});
... then do something here
Ext.Viewport.setMasked(false);
Note that Javascript is asynchronous, so it does NOT make sure that the code lines are run in above order. Then there is a possibily that Sencha Touch initializes your loading mask and destroys it right then. In order to use loading mask correctly:
Initialize a loading mask as above.
Put the Ext.Viewport.setMasked(false); in special functions which are ensured to be launched after loading mask initialization, eg. event handler, or success function of your JSONP/AJAX request.
I do it the following way:
Ext.Viewport.setMasked({xtype:'loadmask',message:'your custom loadmask'});
Then you can use
Ext.Viewport.setMasked(false);
To stop showing a loading mask
This also works on components if you only want to show a mask on part of a view
Just remove all this.I have nice idea how to use loader.First on main page html just add loader
<div id="loader"></div>//add id#loader with background loading image
after your page loads just add on contoller Ext.get('loader').destroy();//when you page full load then it will load your loading div

Changing visibility does not immediately hide iFrame

I have a page that on a certain action makes an iframe visible and fills the iframe with some HTML (say for example a multi-select box and an ok button).
The OK button on the iframe has the onClick method defined kinda like this:
onClick="parent.hideIFrame();parent.processMultiSelectBox();"
When User clicks OK on the iframe (presumably after playing with the multi-select box), I'd like the iFrame to disappear immediately and then the selected values in the multi-select box can be processed. But this is not what's happening. The iFrame remains visible during the time the other function runs and disappears only after the second function finishes.
The hideIFrame function is pretty straightforward:
function hideIFrame() {
frmObj = document.all.iFrameID;
if(frmObj) {
frmObj.style.visibility = "hidden";
}
}
I've paraphrased the above function for clarity (removed some indicator variable assignments etc.)
The second function actually loops on all the options in the multi-select object and does stuff with it. This takes about a half a second and only after that is done, does my iFrame disappear. It is a little bothersome to see it linger for half a second when I click ok.
My question is whether there is some way I can make the darn thing disappear faster. Speaking in "classical C" lingo, is there a "flush" for the change in visibility to happen immediately?
I did notice that if I put an "alert" as the first line in my second function, the iframe disappears immediately but now it is the OK on the alert box that lingers for the time it takes the second function to finish.
Thanks.
EDIT: Based on DDaviesBrackett's answer, this is what I ended up doing:
The onclick in the iframe changed to:
onClick="parent.hideAndProcessMultiSelectBox(parm1, parm2);"
The hideAndProcessMultiSelectBox function was defined as:
function hideAndProcessMultiSelectBox( parm1, parm2 ) {
hideIFrame();
setTimeout( function() { processMultiSelectBox( parm1, parm2 ); }, 0 );
}
Voila.. no delay..
You've gotten to the root of your problem already; document reflow doesn't happen until the current JS thread is done (so as not to repaint lots of times during JS execution). You need to return control to the browser before doing your expensive processing.
The simplest way to achieve that, though it doesn't make for obvious code in the slightest, is to call processMultiSelectBox in a setTimeout with a delay of 0:
onClick="parent.hideIFrame();parent.setTimeout(parent.processMultiSelectBox,0);"
If you need to pass parameters to the thing you're setting a timeout on, you have two options: set a timeout on a string that evals to Javascript (bad, bad, very bad, horrible) or define an anonymous function that calls the one you're interested in:
onClick="parent.hideIFrame();parent.setTimeout(function(){parent.processMultiSelectBox(foo, bar, 'baz');},0);"
RSolberg's response may also help, though there's a difference between visibility:hidden and display:none.

Categories