Broken Image link Handling

Missing images will either just display nothing, or display a [ ? ] style box when their source cannot be found. Instead, you may want to replace that with a "missing image" graphic that you are sure exists so there is better visual feedback that something is wrong. Or, you might want to hide it entirely. This is possible because images that a browser can't find fire off an "error" JavaScript event we can watch for.

// Replace source
$('img').on("error", function() {
  $(this).attr('src', '/images/missing.png');
});

// Or, hide them
$("img").on("error", function() {
  $(this).hide();
});

Additionally, you may wish to trigger some kind of Ajax action to send an email to a site admin when this occurs.

What are jQuery CDN?

CDN Stands for Content Distribution Network or also called Content Delivery Network is a large distributed system of servers deployed in multiple data centers in the Internet. The goal of a CDN is to serve content to end-users with high availability and high performance. There are several advantage of using CDN.

• Reduce Load: It reduces the load on your web server as it downloads from Google server's.
• Caching: The most important benefit is caching. If any previously visited site by user is using jQuery from any CDN then the cached version will be used. It will not be downloaded again.
• Serves fast: You will be also benefited from speed point of view. As CDN has dozen's of different servers around the web and it will download the jQuery from whichever server is closer to the user.
• Parallel Downloading: As the jQuery js file is on a separate domain, modern browsers will download the script in parallel with scripts on your domain.

There are 3 different CDN that provide jQuery.

• Google
• Microsoft
• jQuery

Code to load jQuery Framework from Google CDN

Code to load jQuery Framework from Microsoft CDN

Code to load jQuery Framework from jQuery Site(EdgeCast CDN)

It is a good practice to use CDN but what if the CDN is down (rare possibility) but you never know in this world as anything can happen. So if you have loaded your jQuery from any CDN and it went down then your jQuery code will stop working. To handle such situation you can "Load jQuery locally when CDN fails".

Load jQuery locally when CDN fails

There are couple of advantage if you load your jQuery from any CDN. It is a good approach to always use CDN but sometimes what if the CDN is down. So if you have loaded your jQuery from any CDN and it went down then your jQuery code will stop working, what to do in such situation.

Hang on, there is a solution for this as well. Below given jQuery code checks whether jQuery is loaded from Google CDN or not, if not then it references the jQuery.js file from your folder.

It first loads the jQuery from Google CDN and then check the jQuery object. If jQuery is not loaded successfully then it will references the jQuery.js file from hard drive location.

Features of jQuery

Features of jQuery

• It works on all browsers
• It is fast and extensible
• Make look UI stunning
• Allows to access elements in the document
• Easily apply CSS
• Perform animation in better way
• Ajax Interaction made easy
• Change document’s content easily
• Event handling made easy
• Big pool of reusable plugins for various functionalities

What is Chaining in jQuery?

You may have come across a term "Chaining" in jQuery. But do you know what is Chaining in jQuery? There is no specific definition available for this term in jQuery but it is also not different from the general meaning of Chain. In general term Chain is, "A connected flexible series of metal links used for fastening or securing objects and pulling or supporting loads". See below image which dictates what is chaining.

Even in jQuery, Chaining means to connect multiple functions, events on selectors. It is one of the most powerful feature of jQuery. To understand it better take a look at Sample Code 1 and 2.

Sample Code 1

​$(document).ready(function(){
    $('#dvContent').addClass('dummy');
    $('#dvContent').css('color', 'red');
    $('#dvContent').fadeIn('slow');
});​

Sample Code 2

​$(document).ready(function(){
    $('#dvContent').addClass('dummy')
          .css('color', 'red')
          .fadeIn('slow');    
});​

Both the sample codes above will perform the exact same thing but the only difference is that sample code 2 is using chaining. But code 2 is faster and shorter then code 1. But you must be thinking that why do I say so?

The problem with the sample code 1 is that for every statement, jQuery has to search the entire DOM and find the element and after that executes the attached function on it. But when chaining is used, then jQuery has to find the element only once and it will execute all the attached functions one by one. This is the advantage of Chaining.

Important points about Chaining

• It makes your code short and easy to manage.
• It gives better performance.
• The chain starts from left to right. So left most will be called first and so on.

Not only functions or methods, chaining also works with events in jQuery. For example, below piece of code have click, mouseover and mouseout event for a button.

$(document).ready(function() {
    $("#btnDummy").click(function(e) {
        alert("click!");
    }).mouseover(function(e) {
        alert("mouse over!")
    }).mouseout(function(e) {
        alert("mouse out!")
    });
});​

What is jQuery?

jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers.