Notes Log » HTML

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.



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



How to Share Source Code using Chili in IE
Andrea Ercolino — Thu, 22 Feb 2007 10:14:03 +0000
I’ve recently realized that copying to the clipboardÂ a snippet highlighted by Chili works differently in Internet Explorer (IE)Â and in Mozilla Firefox (FF). They both copy two versions of the selected section: TEXT and HTML.

IE TEXT
HTML entities resolved

HTML stripped off
result copied
FF TEXT
HTML entities resolved

BR elements replaced by new lines

HTML stripped off
result copied
IE HTML
HEAD element copied

containment path elements copied

selected text with HTML in place copied
FF HTML
selected text with HTML in place copied

The net result of all this is that IE does the right thing with HTML while FF does the right thing with TEXT, and neither is completely right or wrong.

copying from IE to Notepad you getÂ an awful long line, but copying to Word you get all wonderfully colored
copying from FF to Notepad you getÂ aÂ properly formattedÂ section, but copying to Word you get all sadly monochromatic

UPDATE (2007/02/24): What follows is obsolete, because I’ve implemented a transparent methodÂ in Chili 1.7
In Chili 1.6 I’ve implemented aÂ workaround for IE, so that IE TEXT isÂ like FF TEXT. It’s a workaround because you need to add a button to each highlighted section, and it will copy all the text in that section when clicked.
The button can be as simple as a DIV placed before the PRE, likeÂ this: 

copy all


alert( "Hello World!" );

Chili will hideÂ any element with a class ie_copy in any browser but IE, where insteadÂ it willÂ associate a click handler to it,Â forÂ copying all the next PRE content as a properly formatted section. You can style the button element as you like, because Chili uses the class onlyÂ forÂ accessing the element.
You can alsoÂ place the button wherever you like. If so, i.e. if the button element is not the element preceding the PRE section, then you have to feed Chili the method for getting the PRE content. You can do it globally or locally.
When Chili associates the handler to the button, it will look for a getPRE method inside the button element. If there is one, then it will be used, else Chili will look for a getPRE method inside the global ChiliBook object. If there is one, then it will be used, else Chili will give up and not associate a handler.
You can change the global behavior by changing the declaration of the getPRE method inside the ChiliBook object, and you can change the local behavior by adding a chili metaobject (an object with aÂ class chili)Â inside the button element, with a getPREÂ param whose value isÂ the function declaration.
The getPRE function shipped with Chili 1.6 is the following, where theÂ button element is passedÂ intoÂ thisÂ and the PRE destination is found starting fromÂ that origin:
function() { return $( this ).next( "pre" )[0]; }
A button element after the PRE element could then be locally configured like this: 

alert( "Hello World!" );



	

copy all




How to Highlight Mixed Language Source Code
Andrea Ercolino — Fri, 16 Feb 2007 15:35:29 +0000
Web pages contain many snippets from different languages, like HTML, PHP, CSS, and JavaScript. Chili 1.x cannot highlight mixed language source code automatically, but the forthcoming released Chili 2.0 will be is able to do that.
Meanwhile, if you are using a Chili + Enzymes setup, then it’s possible to write an Enzymes template capable of making Chili 1.x highlight a web page perfectly (expanding on my previous php template).
Here is the new updated (2007/02/19) chili-web.php Enzymes template. At the moment it supports XHTML, and embedded CSS, JavaScript, and PHP snippets.
'.htmlentities( $code ).'';
	}

	function snippet_php( $open, $code, $close ) {
		return snippet_wrap( 'html', $open ).snippet_wrap( 'php', $code ).snippet_wrap( 'html', $close );
	}

	function php_inside_html( $matches ) {
		list( $all, $before, $open, $code, $close ) = $matches;

		if( '' == $open ) 
			return snippet_wrap( 'html', $all );
		else 
			return snippet_wrap( 'html', $before ).snippet_php( $open, $code, $close );
	}

	function php_inside_css( $matches ) {
		list( $all, $before, $open, $code, $close ) = $matches;

		if( '' == $open ) 
			return snippet_wrap( 'css', $all );
		else 
			return snippet_wrap( 'css', $before ).snippet_php( $open, $code, $close );
	}

	function php_inside_javascript( $matches ) {
		list( $all, $before, $open, $code, $close ) = $matches;

		if( '' == $open ) 
			return snippet_wrap( 'javascript', $all );
		else 
			return snippet_wrap( 'javascript', $before ).snippet_php( $open, $code, $close );
	}

	function php_inside( $class, $code ) {
		return preg_replace_callback( '/(?:(.*?)(\<\?php\s)(.*?)(\?\>))|(?:.+)/si', "php_inside_$class", $code );
	}

	function snippet_web( $class, $open, $code, $close ) {
		return snippet_wrap( 'html', $open ).php_inside( $class, $code ).snippet_wrap( 'html', $close );
	}

	function format_code( $matches ) {
		list( $all, $before, $open, $tag, $code, $close ) = $matches;

		if( '' == $open ) {
			return php_inside( 'html', $all );
		}
		else {
			switch( $tag ) {
				case 'script': $class = 'javascript'; break;
				case 'style' : $class = 'css';        break;
				default      : $class = 'html';
			}
			return php_inside( 'html', $before ).snippet_web( $class, $open, $code, $close );
		}
	}

	function format_clean( $out ) {
		do {
			$len = strlen( $out );
			$out = preg_replace( '/(\[^<]*)\<\/code\>\/is', '$1', $out );
		} while( $len != strlen( $out ) );
		return $out;
	}
}

?>
)(.*?)(\<\/\3\>))|(?:.+)/is', 'format_code', $this->result );
	echo format_clean( $out );
?>

The WordPress file /wp-content /themes /default /comments-popup.php is a page that uses all the supported languages, so it’s a good test for the previous template:




     <?php echo get_option('blogname'); ?> - Comments on <?php the_title(); ?>

	
	






Comments

RSS feed for comments on this post.

ping_status) { ?>
The URL to TrackBack this entry is: 


post_password) && $_COOKIE['wp-postpass_'. COOKIEHASH] != $post->post_password) {  // and it doesn't match the cookie
	echo(get_the_password_form());
} else { ?>




	
	
	 by  â€”  @ 
	




	No comments yet.


comment_status) { ?>
Leave a comment
Line and paragraph breaks automatic, e-mail address never displayed, HTML allowed: 


	
	  
	   Name
	
	" />
	

	
	  
	   E-mail
	

	
	  
	   URL
	

	
	  Your Comment
	

	  
	

	
	  
	
	ID); ?>


Sorry, the comment form is closed at this time.


Close this window.





 Powered by WordPress




Chili & Enzymes confirm to be a perfect match.



HTML Recipe: Tighter Values
Andrea Ercolino — Fri, 16 Feb 2007 07:33:22 +0000
There a was a bug in the highlighting of attributes’ values. The problem was that any string got highlighted, even if it wasn’t preceded by an equal sign. That’s fixed now.
Also I’veÂ addedÂ the PHP’s opening and closingÂ tags.
/*
===============================================================================
Chili Recipe for the XHTML language
...............................................................................

Version: 1.5d - 2007/02 - http://noteslog.com/chili/

-------------------------------------------------------------------------------
Copyright (c) 2006 Andrea Ercolino
http://www.opensource.org/licenses/mit-license.php
===============================================================================
*/

{
    steps: {
          mlcom : { exp: /\