Saturday, August 25, 2012

AdRotator Using jQuery


In this article will see how to create an AdRotator using jQuery without using the AdRotator ASP.NET control.

Step 1

Add the jQuery file and reference in your page, as in:


Step 2

Create some static "LI" elements as shown below. We can dynamically create these elements from the DB also. Notice that the "Div" id needs to referred to in jQuery.


Step 3

Add the jQuery scripts to load the AdRotator.


In the script, first the variable for the active "LI" element needs to be initialized and we set to "0". Using "nth-child()" jQuery selector we can select specific child elements and check the following link for more details about the selector: 

Step 4

Run the solution and check the output.


Creating an AdRotator using jQuery is simple as well as powerful.

Wednesday, August 15, 2012

Performance improvement using JavaScript Lazy Loaders:


In this article is a demonstration of how to improve performance using the "Rocket.JS" and "Head.JS" open-source library.

About Rocket.JS

Rocket is a simple JavaScript lazy loader that aims to reduce the loading times of pages caused by blocking JavaScript. It's usage is as simple as possible in order to ensure it's easy to fit into existing code.

Step 1

Configure Rocket.JS file

We will download the JS file from the following Git repository:

Once we have download the JS file, we add a reference to our existing project.


We need to add the "head.js" file reference and add some jQuery code to determine if the Jquery.js works correctly or not. 

Step 2

First we will see the page performance without "Rocket.JS".


This is just a normal ASP.Net start-up page and note the timelines for each page's resources (like JS and CSS files) to complete the page load. Overall it requires a major consumption of resources to complete and the most of the time is consumed by our "Jquery.JS" file.

We just considered the first-time page load now and see the following image for JavaScript code.

Step 3

Now we will do some changes in the JavaScript code as described below.


We added the "Rocket.JS" file reference to our page and call the rocket.load method to implement the JavaScript lazy loader and added some jQuery to determine if the lazy loader is working correctly or not.

After the "Rocket.JS" implementation our JavaScript file (foobar.js) will load at the end.


But I am not still convinced, because the Jquery.js file still takes more time. We will try another alternate solution using "Head.JS".

Using "Head.JS" will result in further performance improvements:

About head.JS

Head JS loads JavaScript files like images without blocking the page. Your page will be faster even with a single combined file.

Download the JS file and reference file as described from the following URL:

Download URL:

Implement the Head.JS as mentioned below:


After implementation we will see the jQuery and foobar.js files are loaded as in the following image.



Using head.js we can control what are all the scripts we need to load in the page and the order of the scripts as well.

Note: The network time for chrome may vary depending on your browser and version; it is just for your reference.

Load Master Page User Control Dynamically to Improve Performance


Problem: We have the master page and we will embed the user the control and the same master page will used by various pages. For some pages we don't require the user control to be visible. If we also hide the call to that user control, we cannot avoid it.

Step 1 : We have very simple user control, just some label in HTML.


Step 2 : In code behind, we will hold the thread for a while, assuming we are doing some complex process in that user control and display the content.


Step 3 : Add the user control to the master page. First register it and using the tag name embed the control.


Step 4 : Just create a new ASP.Net page with master page reference and load it and the result will be as below. Ignore the design aspects; we will focus on the user control alone.


The User Control will be loaded in right side and below the load time as well.
Step 5 : We will create one more page, that doesn't require the user control. We will just hide the control using jQuery.

Even if we hide also, the user control will be called internally.


Step 6 : We will remove the user control related "HTML" in the master page and just add a placeholder.


Step 7 : Now we can load the master page control from the child/content page. Write the following code in the Page_LoadComplete event of the Content Page, which comes just after the Page_Load event of the Master Page.

We will run the page and get the same result as below.


Now we will load the other page which doesn't require the Master Page User Control. It just loads the master and child page contents alone.



We need to add some code in the page which requires loading the Master Page User Control dynamically.