Today, many javascript plugins exist to solve this problem. One of the most famous ones is the Lazy Load jquery plugin by Mika Tuupola.

However, while lazy loading is a very nice feature, responsiveness is at least of the same criticality. To solve lazy loading and responsiveness at the same time, I switched to the jquery plugin Unveil (GitHub) provided by Luis Almeida.

  <a id="mybutton"  data-role="button">MyButton</a>

        $('#mybutton').click(function(event) {
            event.preventDefault();
            event.stopImmediatePropagation();
            // some action
            ...
        });

However, this will keep your button in an active state which does feel very responsive.

Simply returning true at the end of your handler function or trying to trigger the event again will not work. JQuery internally removes all flags of the event.

The solution to bring your button back into it’s not active status at the end of your handler, you need to manually remove jquery mobiles active button class.
This is supported by a global variable $.mobile.activeBtnClass.

So just change your handler code above and add the assignment of this class at the end:

        $('#mybutton').click(function(event) {
            event.preventDefault();
            event.stopImmediatePropagation();
            // some action
            ...
            this.$('a').removeClass($.mobile.activeBtnClass);
        });

Mattbanks has published an easy to use jQuery plugin to include to your website:
https://github.com/mattbanks/jQuery.equalHeights

To integrate it in your website, simply

1. download the jquery.equalheights.min.js file to your app,
2. integrate it after your jQuery reference (see below)
3. trigger the divs that should be of equal height

Integrate the js files (recommended at the end of your page).

<script language="javascript" src="js/jquery/jquery-1.10.2.min.js"></script>
<script language="javascript" src="js/jquery/jquery.equalheights.min.js"></script>

Trigger the equal height plugin

$(document).ready(function() {
  window.setTimeout(function(){
    $('.equalColumns').equalHeights();
  }, 200);
});

Note, the timeout function is used to trigger the equal height asynchronously. You do not have to do this, but it is recommended if you face any trouble with other JS plugins on your website.

A good jQuery plugin to do this is jquery.mobile.fastButtons.js available at
http://www.jqueryscript.net/mobile/jQuery-Plugin-For-Removing-The-300ms-Delay-On-Mobile-Device-fastButtons.html

The plugin is easy to install and uses an approach to replace the click events with vclick events which are faster applied. The plugin is also very lightweight. So just a small overhead in loading and only replaces the default click handler.

To enable the plugin, simply download the file, place it in your application and include the script file after the jQuery and jQuery Mobile libraries. For example:

  <script src="js/lib/jquery-1.10.2.min.js"></script>
  <script src="js/lib/mobile/jquery.mobile-1.4.0.min.js"></script>
  <script src="js/lib/jquery.mobile.fastButtons.js"></script>

Other approaches, such as the fastbutton plugin add a layer div or span on top of your application and try to estimate the element visually present under this layer. This is done by pixel calculations with a small deviation. It works fine for static elements not located close to other elements. But for example, if your header contains an icon close to the screens border to open a sliding panel, the click behaviour can be completely messed up du to this deviation.

To programmatically control he loading dialog, jQuery provides a Javascript API. For example, you can show the dialog by calling

$.mobile.loading('show');

or hide the dialog via

$.mobile.loading('hide');

However, what is missing in the documention, this control is not available at anytime during your program execution. As described in this stack overflow thread, the loader can only controlled directly during the showpage event processing.

To solve this issue and control the loader widget at anytime, you must execute it asynchronously. This can be achieved by putting it into a setTimeout() callback.

function showLoader() {
    window.setTimeout(function(){
        $.mobile.loading('show');
    }, 1);
};

function hideLoader() {
    window.setTimeout(function(){
        $.mobile.loading('hide');
    }, 1);
};

Note: Some people, as in the stack overflow discussion mentioned above, use a solution based Javascript’s setInterval() method. It did not work reliably in my experience, and the intend of setInterval() is to execute something periodically. In our case, we want to control the loader widget only once. So setTimout() better fits to out intention.

To process all scripts of the remote page, one could execute the globalEval for each script element of the loaded page:

scripts.each(function () {
$.globalEval(this.text || this.textContent || this.innerHTML || '');
});


However, this code works fine in FireFox and Chrome, but it might fail in IE Version 9 and before. The typical exception thrown by the brwoser is:
"Error: Could not complete the operation due to error 80020101."
The error code indicates a problem of an ajax call, which is not totally wrong but missleading in this case. Unfortunately, the error is thrown inside the jQuery library and one needs to follow the call stack to find out, this origins in the globalEval of your own script!

The reason for this error is, the Internet Explorer 9 and before, are not able to process any code comments within the loaded JavaScript. So before executing the globalEval() method, one must clean up the JavaScript code from any code comments. This can be done by adding a replace with a regular expression filtering the code comments:

scripts.each(function () {
$.globalEval(this.text.replace(//, '$1')
|| this.textContent.replace(//, '$1')
|| this.innerHTML.replace(//, '$1')
|| '');
});


But, again, this might lead to an error. Not in IE9, but the IE8 will fail if a script element is hit which does not have it’s content within the text attribute but in the textContent or innerHTML. The reason is a call of replace() on an undefined or empty this.text reference.

To finally fix this and successfully load any remote JavaScript, you should use the code below:


scripts.each(function () {
if (this.text != undefined && this.text != '') {
$.globalEval(this.text.replace(//, '$1'));
} else if (this.textContent != undefined && this.textContent != '') {
$.globalEval(this.textContent.replace(//, '$1'));
} else if (this.innerHTML != undefined && this.innerHTML != '') {
$.globalEval(this.innerHTML.replace(//, '$1'));
}
});


A stackoverflow discussion that was helpful to build this solution:
http://stackoverflow.com/questions/7072060/after-upgrading-to-jquery-1-6-2-globaleval-throws-an-error-when-trying-to-execu