Saturday, August 25, 2012

AdRotator Using jQuery

Introduction

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:

JQuery1.jpg

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.

JQuery2.jpg

Step 3

Add the jQuery scripts to load the AdRotator.

JQuery3.jpg

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:

http://api.jquery.com/nth-child-selector/ 

Step 4

Run the solution and check the output.

Summary

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

Wednesday, August 15, 2012

Performance improvement using JavaScript Lazy Loaders:

Introduction

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:

https://github.com/imagehst/Rocket

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

JvLzLdr1.gif

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".

JvLzLdr2.gif

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.

JvLzLdr3.gif

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.

JvLzLdr4.gif


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: http://headjs.com/#download

Implement the Head.JS as mentioned below:

JvLzLdr3.5.gif

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

JvLzLdr5.gif

Summary

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


Introduction

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.

master1.gif

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.

master2.gif

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

master3.gif

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.

master4.gif

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.

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

master6.gif

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

master7.gif

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.

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

master9.gif

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.

master10.gif

Summary

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