Notes Log » jQuery

How to show a slow loading page

Andrea Ercolino — Sun, 05 Apr 2009 22:52:59 +0000

Problem – Slow loading pages are frustrating, for web users and developers too. Of course there are many possible tweaks you can use to speed them up, but sometimes you cannot optimize a page any further.

UPDATED 2009-10-11

Solution – If you can’t beat them, join them. You can show a progress indicator to let your web users know that your server is thinking hard the answer to their request, but how do you do that?

Requirement 1 – You cannot put the progress indicator on the leaving page, because you don’t want to modify every single reference to a slow page. It doesn’t make sense either: a slow page is slow by itself! You really don’t need that coupling.

Requirement 2 - You cannot put the progress indicator on the landing page, the slow one, because the browser needs it before the slow page has arrived. If they arrive together, the progress indicator is useless!

There is a good article about this issue but it fails at implementing the first requirement. Anyway that was the idea I worked on when starting this project.

Here is the waiting page that get’s loaded while loading the slow page. For browsers other than IE, the trick is to change the document.location.href property after loading the progress indicator image. In IE we change the document.location.href and then add the image.

I used jQuery to make it simple.

waiting.php





Loading Page...






Loading Page...

echo $method ?>" action="echo $url ?>">
 echo $waiting ?>" />





And here is the slow page.
slow-page.php

if ( ! isset($_REQUEST['waiting']) ) {
    $url = htmlspecialchars( $_SERVER['REQUEST_URI'] );
	$method = $_SERVER['REQUEST_METHOD'];
	$waiting = time();
	include "waiting.php";
    return;
}

sleep(10); //simulate a slow task

?>




 Slow Page

 Hello World!




You can test it here.



How to cause a view refresh in jQuery
Andrea Ercolino — Sat, 05 Jul 2008 13:05:57 +0000
$('body').width( $('body').width() - 1 ).width( $('body').width() + 1 );




How to force jQuery.extend deep recursion
Andrea Ercolino — Sun, 30 Mar 2008 13:13:14 +0000
jQuery.extend extends a target object with properties from other objects and it’s widely used in every piece of jQuery code.
Really it’s very useful and simple to undestand and use for flat properties.
jQuery.extend( 
  { a:1, b:'2' }, 
  { a:'1', c:3 } 
) == 
  { a:'1', b:'2', c:3 }

On the contrary, if the involved objects have object properties, jQuery.extend is less intuitive and less useful too.
jQuery.extend( 
  { a:{ x:1 }, b:'2' }, 
  { a:{ y:'1' }, c:3 } 
) == 
  { a:{ y:'1' }, b:'2', c:3 }

Luckily, an undocumented feature (deep) makes jQuery.extend recurr object properties.
jQuery.extend( true, 
  { a:{ x:1 }, b:'2' }, 
  { a:{ y:'1' }, c:3 } 
) == 
  { a:{ x:1, y:'1' }, b:'2', c:3 }

Unluckily, deep only works for the first level. (not really a ‘bug’)
jQuery.extend( true, 
  { a:{ x:1, z:{ m: '' } }, b:'2' }, 
  { a:{ y:'1', z:{ n: 0 } }, c:3 } 
) == 
  { a:{ x:1, y:'1', z:{ n:0 } }, b:'2', c:3 }

If you need deep recursion use jQuery.extend_deep instead.
jQuery.extend_deep( true, 
  { a:{ x:1, z:{ m: '' } }, b:'2' }, 
  { a:{ y:'1', z:{ n: 0 } }, c:3 } 
) == 
  { a:{ x:1, y:'1', z:{ m:'', n:0 } }, b:'2', c:3 }

Here is the jQuery.extend_deep plugin:
/**
 * Implement deep object extension 
 * by replacing the line 599 of jQuery-1.2.3.js
 * (commented out in this function)
 */
jQuery.extend_deep = function() {
	var target = arguments[0] || {}, i = 1, length = arguments.length, deep = false, options;

	if ( target.constructor == Boolean ) {
		deep = target;
		target = arguments[1] || {};
		i = 2;
	}

	if ( typeof target != "object" && typeof target != "function" )
		target = {};

	if ( length == 1 ) {
		target = this;
		i = 0;
	}

	for ( ; i < length; i++ )
		if ( (options = arguments[ i ]) != null )
			for ( var name in options ) {
				if ( target === options[ name ] )
					continue;

				if ( deep && options[ name ] && typeof options[ name ] == "object" && target[ name ] && !options[ name ].nodeType )
//					target[ name ] = jQuery.extend( target[ name ], options[ name ] );
					target[ name ] = jQuery.extend_deep( true, target[ name ], options[ name ] );

				else if ( options[ name ] != undefined )
					target[ name ] = options[ name ];

			}

	return target;
};




Metaobjects 1.5 Released
Andrea Ercolino — Tue, 18 Mar 2008 22:10:23 +0000
Changes

Added support for easy namespacing
Added support for jQuery 1.2.3 cache
Rewritten the manual from scratch

Download
You can download metaobjects from Google Code



Chili 1.9 Released Today
Andrea Ercolino — Mon, 24 Sep 2007 19:50:40 +0000
UPDATE: Chili 2.0 has been released
Changes

Circumvented an evil bottleneck
Simplified the core clockwork
Removed the bundled jQuery library
Changed the plugin names to follow the naming convention of jQuery’s plugins
Added a new example showing that Chili 1.9 is much faster

Links

chili.zip
Quick Start
Chili Central




How to fix the resize event in IE
Andrea Ercolino — Sun, 23 Sep 2007 21:45:46 +0000
In IE the window resize event is fired multiple times per actual resize: it is a well known issue for IE6 and IE7, but they misbehave along different patterns. Actually it seems that IE6 is worse than IE7.
After quite a long session of R&D, I’ve got to a pretty good solution, in the form of a jQuery plugin: jquery.wresize.js
/*  
===============================================================================
WResize is the jQuery plugin for fixing the IE window resize bug
...............................................................................
                                               Copyright 2007 / Andrea Ercolino
-------------------------------------------------------------------------------
LICENSE: http://www.opensource.org/licenses/mit-license.php
WEBSITE: http://noteslog.com/
===============================================================================
*/

( function( $ ) 
{
	$.fn.wresize = function( f ) 
	{
		version = '1.1';
		wresize = {fired: false, width: 0};

		function resizeOnce() 
		{
			if ( $.browser.msie )
			{
				if ( ! wresize.fired )
				{
					wresize.fired = true;
				}
				else 
				{
					var version = parseInt( $.browser.version, 10 );
					wresize.fired = false;
					if ( version < 7 )
					{
						return false;
					}
					else if ( version == 7 )
					{
						//a vertical resize is fired once, an horizontal resize twice
						var width = $( window ).width();
						if ( width != wresize.width )
						{
							wresize.width = width;
							return false;
						}
					}
				}
			}

			return true;
		}

		function handleWResize( e ) 
		{
			if ( resizeOnce() )
			{
				return f.apply(this, [e]);
			}
		}

		this.each( function() 
		{
			if ( this == window )
			{
				$( this ).resize( handleWResize );
			}
			else
			{
				$( this ).resize( f );
			}
		} );

		return this;
	};

} ) ( jQuery );
If you want to try it, here is a test page, where a div is automatically resized when the window is resized.


 
   test window resize 







 

 
 

test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test 


 

References:
http://dev.jquery.com

 http://snook.ca

 http://ecmascript.stchur.com



Differences between jQuery Selections
Andrea Ercolino — Sun, 16 Sep 2007 21:05:52 +0000
The most basic action for a jQuery script is to select elements to act upon later.
I’ve just made up a little page for testing the differences between jQuery selections.



Chili 1.8c Released Today
Andrea Ercolino — Sat, 21 Jul 2007 23:37:07 +0000
UPDATE: Chili 1.9 has been released
Changes

Fixed the single chunk limitation. Now any element should be properly highlighted by Chili, even if it contains many chunks, even if it is already highlighted.
Updated the bundled jQuery library to version 1.1.3.1
Removed the examples from the distribution zip
Added a quick start guide, with a 3 steps Chili installation, all the examples, and a simple how-to for HotChili

Links

chili.zip
Quick Start
Chili Central




Introducing HotChili
Andrea Ercolino — Sun, 08 Jul 2007 12:07:35 +0000
The rationale behind Chili is that I need highlighted code to understand a program listing. I developed Chili to make it really easy for every blogger to add highlighting to their own code snippets.
The rationale behind HotChili is that many sites still don’t use any highlighting at all, and that bothers me. I developed HotChili to make it really easy for every internet user to add highlighting to someone else’s code snippets.
HotChili is a Greasemonkey user script (plugin), so it runs on any FireFox browser with that extension installed. HotChili is very easy to install and easier to use. Just click on a dull snippet and spice it up by selecting a language off the popup menu. If you change your mind, click again and undo it. That’s all!!
Install HotChili
After installing HotChili, you can browse the web as usual. If you want to test it, here is a short list of good programming pages that lack any highlighting: 1, 2, 3, 4, 5 …
As you see, HotChili is very simple to use and adds quite a readability factor to code. My advise is to turn it off during normal browsing, and turn it on when you really need it.



Chili 1.8b Released Today
Andrea Ercolino — Sun, 27 May 2007 19:56:43 +0000
UPDATE: Chili 1.8c has been released
Changes

Fixed a bug that showed up when the content of an element to highlight was not a single chunk: in that case the content was erased. Now such an element won’t be highlighted by Chili.

Content without markup is one chunk, which makes it possible to apply Chili’s markup.

Files

download all in a zip
read the manual
Examples

bundled languages

this page shows how Chili highlights the bundled languages: JavaScript, PHP, MySQL, XHTML, Java, C++, C#, Delphi, and LotusScript (BTW, using the dynamic and automatic setup)
static, automatic, adhoc: this page shows how to setup Chili for

downloading recipes and stylesheets all at once, using HTML
highlighting code sections automatically
highlighting code sections ad-hoc


dynamic, automatic, adhoc: this page shows how to setup Chili for

downloading recipes and stylesheets as needed, using AJAX
highlighting code sections automatically
highlighting code sections ad-hoc


dynamic, automatic, adhoc, metaobjects: this page shows how to setup Chili for

downloading recipes and stylesheets as needed, using AJAX
highlighting code sections automatically
highlighting code sections ad-hoc
highlighting code sections using special recipes and stylesheets, by means of metaobjects




all the other combinations: this page shows all the other possible combinations