Image preloading

Most of the times you’ll need preloading when there are elements in the DOM that are hidden, but have an image background. On the moment the elements are shown and the images are not found in cache, the images are loaded from the server. This action has a small delay, so your element first shows up without the image background. That might confuse the visitor.

Note that there are other possible scenario’s that need image preloading, but this case is a nice introduction.

Delaying image preloading

Why in the world would we like to delay the preloading of the images? Well, most browsers only allow two concurrent requests at the same time to the same domain (correct me if I’m wrong). When we do the image preloading on domready, it might hold up other resources that need to be loaded. Because we preload images that are not shown when the page loads, we can delay the preloading.

The javascript

Let’s say we have a total of five images that need to be preloaded. Here’s how I would preload the image, 3 seconds after the dom is ready:

Array.each.delay(3000,this,[
	['foo.gif', 'bar.png','moo.png','tools.png', 'mootools.png'],
	function(src){var img = new Image();img.src = src;}
]);

Easy huh? It delays a call to Array.each by 3000 ms. Then it passes the array of images as the first argument, and the function as the second. You can read more about delay at the Mootools Docs.

My tiny feed reader

The Feed Reader

This feed reader polls the COLOURlovers.com Palettes feed and Colours feed every 20 seconds for new items. New items are highlighted with the MooTools Element.highlight() function. The Google AJAX Feed API passes JSON to a callback function, which adds the new ‘colour’ or ‘palette’ entries to the list. Below you can see the uncommented code. The feed reader example contains a commented version.

var Site = {
	entries: [],
	timer: 0,
	init: function(){
		this.paletteFeed = new google.feeds.Feed('http://feeds.feedburner.com/ColourloversCoup0Palettes/New');
		this.colourFeed = new google.feeds.Feed('http://feeds.feedburner.com/ColourloversCoup0Colours/New');
		this.poll.periodical(1000, this);
	},
	poll: function(){
		if (--this.timer <= 0) {
			this.colourFeed.load(this.onLoadCallback.bind(this));
			this.paletteFeed.load(this.onLoadCallback.bind(this));
			this.timer = 20;
		}
		$('refresh').set('html','Refreshing feeds in ' + this.timer + ' second(s)...');
	},
	onLoadCallback:function(json){
		if (json.error) return;
		for (var i = json.feed.entries.length - 1; i >= 0; i--) {
			var entry = json.feed.entries[i];
			if (!this.entries.contains(entry.title)) {
				this.entries.push(entry.title);
				$('feeds').innerHTML = ('<li class="entry"><a href="{link}" title="{title}">{content}</a></li>').substitute(entry) + $('feeds').innerHTML;
			}
		}
		$$('.entry').set('tween',{duration:2000}).highlight().removeClass('entry');
	}
};
google.load('feeds', '1');
window.addEvent('domready', Site.init.bind(Site));

What’s next?

• Google AJAX Feed API
• MooTools Docs

The Problem: Server-side

To get a better feeling for the problem, I’ll show you what happens when we pass an array to json_encode:

// Our sample array
$foo = array(
  'number'  => 1,
  'float'   => 1.5,
  'array'   => array(1,2),
  'string'  => 'bar',
  'function'=> 'function(){return "foo bar";}'
);

// Now encode the array to JSON format
$json = json_encode($foo);

// Send to to the client
echo $json;
...
// This sends the following string to the client:
{
  "number":1,
  "float":1.5,
  "array":[1,2],
  "string":"bar",
  "function":"function(){return \"foo bar\";}"
}

Because PHP reports some errors when we don’t enclose the ‘function’ with quotation marks, it not possible to omit those. So basically, it’s not possible to use json_encode() to create a JSON formatted string with functions.

The solution

My solution is very simple:

• Loop over the associative array that is about to be encoded
• Look for values that start with a function definition (like ‘function(’)
• Remember the value and replace it with a unique key (within the assoc array)
• Encode the changed assoc array to JSON using json_encode()
• Replace the unique keys enclosed in quotation marks with their original values
• Echo the json string

In PHP:

// Our sample array
$foo = array(
  'number'  => 1,
  'float'   => 1.5,
  'array'   => array(1,2),
  'string'  => 'bar',
  'function'=> 'function(){return "foo bar";}'
);

$value_arr = array();
$replace_keys = array();
foreach($foo as $key => &$value){
  // Look for values starting with 'function('
  if(strpos($value, 'function(')===0){
    // Store function string.
    $value_arr[] = $value;
    // Replace function string in $foo with a 'unique' special key.
    $value = '%' . $key . '%';
    // Later on, we'll look for the value, and replace it.
    $replace_keys[] = '"' . $value . '"';
  }
}

// Now encode the array to json format
$json = json_encode($foo);

// $json looks like:
{
  "number":1,
  "float":1.5,
  "array":[1,2],
  "string":"bar",
  "function":"%function%"
}

// Replace the special keys with the original string.
$json = str_replace($replace_keys, $value_arr, $json);

// Send to to the client
echo $json;

// This echoes the following string:
{
  "number":1,
  "float":1.5,
  "array":[1,2],
  "string":"bar",
  "function":function(){return "foo bar";}
}

Now the ‘function’ key is not a String anymore, but it’s a function. So our problem is solved. When using Prototype, it will look something like this:

new Ajax.Request('json_server.php', {
  method:'get',
  onSuccess: function(transport){
     var json = transport.responseText.evalJSON();
     alert(json.function()); // => alerts 'foo bar'
   }
});

There might be dozens of solutions to the problem stated above, but I couldn’t find ‘em on the net. If you know a better technique, please share it!

Different types of statements

There are two types of conditional statements. The first type is the so-called downlevel-hidden statement, which hides the statement from browsers that don’t support conditional comments:

<!-- This is a regular HTML comment -->
<!--[if IE]>
<p>This is a downlevel-hidden conditional statement.
Browsers that don't support conditional comments,
think this is a HTML comment.</p>
<![endif]-->

IE browsers will render the paragraph, but others ‘ll omit it, because they think it’s a HTML comment.

The next type of conditional comment is the downlevel-revealed statement. The statement is rendered by browsers that don’t support conditional statements, and of course, IE 5+ browsers only render the statement when they pass the condition.

<![if (gte IE 6)&(lt IE 8)]>
<p>This paragraph is shown by IE6, IE7 and all browsers
that don't support conditional comments.</p>
<![endif]>

The conditions

MSDN has a nice list of possible conditions, so I’m not going to repeat that, I’ll just give some examples with an explanation.

<!--[if IE 5]><p>IE 5</p><![endif]-->
<!--[if gte IE 5]><p>IE 5+</p><![endif]-->
<!--[if gt IE 5]><p>IE 6+</p><![endif]-->
<!--[if !(IE)]><p>Never shown</p><![endif]-->
<!--[if (IE 6)|(IE 7)]><p>IE6 and IE7</p><![endif]-->
<!--[if (gte IE 5)&!(IE 5.5)]><p>IE5+ except IE5.5</p><![endif]-->
<!--[if true]>
<![if IE 6]><p>IE6</p><![endif]>
<![if IE 7]><p>IE7</p><![endif]>
<![endif]-->
<![if !(IE)]><p>All non IE browsers</p><![endif]>

The uses

If you take a look in the source of this page you can see the following conditional tag in between the header tags.

<!--[if lt IE 7]>
<link type="text/css" rel="stylesheet" href="http://solutoire.com/blog/wp-content/themes/v8.gene/styles/ie6.css" />
<![endif]-->

This conditional comment helps me with keeping my original css file free of hacks. This means that all non-IE browsers render this page just fine, but IE6- messes up most of the positioned elements. Non IE and IE7+ browsers think it’s just a HTML comment, so the css file is not loaded, but IE6- browsers load the css file that corrects the css styles.

The same thing can be done for javascript files. My javascript plotting library Flotr needs Excanvas to treat VML as a canvas element. Excanvas is only needed for IE browsers, because most popular non IE browsers support the canvas element.

<!--[if IE]><script language="javascript" type="text/javascript" src="path/to/excanvas.js"></script><![endif]-->
<script language="javascript" type="text/javascript" src="path/to/prototype-x.x.x.x.js"></script>
<script language="javascript" type="text/javascript" src="path/to/flotr.js"></script>

Further reading

I recommend reading the article on MSDN about conditional statements if this post didn’t make any sense to you. Also, Peter-Paul Koch wrote a nice roundup on conditional comments at his website quirksmode.org.

Grab the Solutoire.com feed!

My Feeds

I use Google Reader as my feed reader (never tried something else). I never read all feed entries, most of the time I’ve more than 1000 unread articles. Here’s an unordered list of the ones I’m dedicated to:

Vitamin (feed)

Vitamin is a resource for web designers, developers and entrepreneurs. The online magazine serves great content written by top authors from the web industry.

ShaunInman.com (feed)

Shaun Inman is a successful designer and developer. He’s also the founder of Mint, the web site analytics program.

Ajaxian (feed)

My daily piece of Ajax.

Devlounge (feed)

Online magazine for designers and developers.

Lifehack.org (feed)

Daily digest and pointers on productivity, getting things done and lifehacks.

Lifehacker (feed)

Tech tricks, tips and downloads for getting things done. This site delivers up to 10 articles a day!

SimpleBits (feed)

The blog/company website of designer and author Dan Cederholm.

Snook.ca (feed)

Snook.ca is the site of web designer, developer, writer and speaker, Jonathan Snook. The articles on the site focus on web development, design, and freelance.

Painfully Obvious (feed)

The weblog of Andrew Dupont, web interface developer and writer.

The Web 2.0 Show (feed)

The Web 2.0 Show is a podcast about emerging technologies commonly referred to as “Web 2.0″, and is hosted by Adam Stacoviak and Josh Owens.

Now, the crucial question is, what’s in your feed reader?

Mootools Powered Scrollbar

Update: making it work with Mootools 1.11

It’s easy to get his working under Mootools 1.11. The syntax for getting the scrollsizes and sizes in Mootools 1.2b2 has changed a bit:

// => Mootools 1.2b2, elements' size and vertical scrollsize
var size = element.getSize().y;
var scrollSize = element.getScrollSize().y;
// => Mootools 1.11, elements' size and vertical scrollsize
var size = element.getSize().size.y;
var scrollSize = element.getSize().scrollSize.y;

For the scrollbars, I’ve used the size and scrollsize of the content element. So to get the scrollbars working under Mootools 1.11, you have to change only one line per scrollbar (see the steps option):

// => For vertical scrollbars
...
new Slider(scrollbar, handle, {
	steps: content.getSize().scrollSize.y - content3.getSize().size.y,
	mode: 'vertical',
...
// => For horizontol scrollbars
...
new Slider(scrollbar, handle, {
	steps: content.getSize().scrollSize.x - content3.getSize().size.x,
	mode: 'vertical',
...