31 July, 2010

Detect IPad Javascript

In my current project I am working on IPad and there are some specific things need to be applied on IPad. We can detect end user's browser and environment information from the navigator using the following code.

var isIPad = navigator.userAgent.match(/iPad/i) != null;

Bandwidth detection with javascript

In one of my current projects, I came across a scenario to play a video based on the users downloading bandwidth. The detection should be done with javascript. There is a technique, to load an image of known size and calculating the bandwidth on basis of time taken to load that image. Though this technique is not 100% reliable, this will give an approximate estimate of bandwidth.

Here is the javascript code to find users bandwidth:

var userBandwidth = 0;
var startTime;
var endTime;
var imgSize = 39842;
var loadTimeInSec;

function GetUserBandwidth() {
var testImage = new Image();
testImage.src = "bwtest.jpg";
startTime = (new Date()).getTime();
testImage.onload = CreateDelegate(testImage, DoneWithTest);
}

function DoneWithTest() {
endTime = (new Date()).getTime();
loadTimeInSec = (endTime - startTime) / 1000;
userBandwidth = (imgSize / loadTimeInSec) / 1024;
}

Here we are loading an image of size 38Kb and added a delegate on image loaded event. In the call back function, we calculate end time, with that we can calculate the bandwidth of the user.

Check my previous post to add delegate in javascript.

Delegate in Javascript

Before going to the topic, lets know brief about "Delegate":
A delegate is like a function pointer, which stores reference of a method. It specifies a method to call and optionally an object to call the method on. They are used, among other things, to implement callbacks and event listeners.

We can create and define delegates in Javascript to perform some specific tasks on an object. The following is the code to define delegate.

function CreateDelegate(contextObject, delegateMethod)
{
return function()
{
return delegateMethod.apply(contextObject, arguments);
}
}

Let us take a simple example and use the delegate in that. Here is the scenario, there is a large image to be loaded on a web page and we need to display the height and width of that image after loading. Delegate method will be very handy in this situation.

var image = new Image();
image.src = "test.jpg";
image.onload = CreateDelegate(image, ImageLoaded);

function ImageLoaded()
{
alert(this.width +" X "+ this.height);
}

We are creating a delegate on image loaded event, which will call method 'ImageLoaded'. This delegate automatically pass the object on which the delegate is defined, to the method. We can refer the actual image object using 'this' in the method.

Pre load images with Javascript

In all UI Rich web applications, it is very common to pre-load images. General method to do this is to use Javascript. We can load images by creating client side images before page gets loaded. It is a simple technique and can be done with 2 lines of code.

var testImage = new Image();
testImage.src = "test.jpg";

With the above lines of code test.jpg will loaded in the DOM. As the images are cached by browsers, whenever we send a new request for test.jpg, the image will be loaded immediately from cache. With this pre-loading technique there wont be any time lag in getting the image also no display lag for the user. This can be used in the scenarios like displaying image gallery with all the thumbnails loaded on first load of the page, image change on hovering/click of some links.

We can do this preloading in html page using an image tag with height and width set to zero or wrapping the dynamic image in a hidden div. But, advantage with this approach is the imag wont be loaded to the page.