Archive for the ‘experiments’ Category

JavaScript includes and DOMContentLoaded event

Saturday, July 26th, 2008

My article about the non-blocking behavior of javascript includes was recently published on the YUI blog. Luke Chambers asked how does this method affect DOMContentLoaded event, so I gave it a shot.

The test examples are:

Basically, I added an event listener to document DOMContentLoaded event and to the onload events of every script, image and the document. I also exaggerated the loading time of scripts and images.

Results

Normal script tag

js: Sat Jul 26 2008 15:53:33 GMT-0700 (Pacific Daylight Time)
DOMContentLoaded: Sat Jul 26 2008 15:53:33 GMT-0700 (Pacific Daylight Time)
img2: Sat Jul 26 2008 15:53:37 GMT-0700 (Pacific Daylight Time)
img1: Sat Jul 26 2008 15:53:37 GMT-0700 (Pacific Daylight Time)
img6: Sat Jul 26 2008 15:53:37 GMT-0700 (Pacific Daylight Time)
img3: Sat Jul 26 2008 15:53:37 GMT-0700 (Pacific Daylight Time)
img5: Sat Jul 26 2008 15:53:37 GMT-0700 (Pacific Daylight Time)
img4: Sat Jul 26 2008 15:53:37 GMT-0700 (Pacific Daylight Time)
img8: Sat Jul 26 2008 15:53:40 GMT-0700 (Pacific Daylight Time)
img7: Sat Jul 26 2008 15:53:40 GMT-0700 (Pacific Daylight Time)
onload: Sat Jul 26 2008 15:53:40 GMT-0700 (Pacific Daylight Time)

DOM-included script

DOMContentLoaded: Sat Jul 26 2008 15:55:29 GMT-0700 (Pacific Daylight Time)
img1: Sat Jul 26 2008 15:55:32 GMT-0700 (Pacific Daylight Time)
img2: Sat Jul 26 2008 15:55:32 GMT-0700 (Pacific Daylight Time)
img6: Sat Jul 26 2008 15:55:32 GMT-0700 (Pacific Daylight Time)
img4: Sat Jul 26 2008 15:55:32 GMT-0700 (Pacific Daylight Time)
img3: Sat Jul 26 2008 15:55:32 GMT-0700 (Pacific Daylight Time)
img5: Sat Jul 26 2008 15:55:32 GMT-0700 (Pacific Daylight Time)
img8: Sat Jul 26 2008 15:55:35 GMT-0700 (Pacific Daylight Time)
img7: Sat Jul 26 2008 15:55:35 GMT-0700 (Pacific Daylight Time)
script: Sat Jul 26 2008 15:55:39 GMT-0700 (Pacific Daylight Time)
onload: Sat Jul 26 2008 15:55:39 GMT-0700 (Pacific Daylight Time)

In any event, the document onload waits for the script, no matter how it's included.

Progress indicator by animating background position

Wednesday, July 23rd, 2008

This post experiments with different patterns for indicating progress, you know, those "loading...", "Please wait..." type of things. The progress is shown by using JavaScript to animate the CSS background position.

TheSixtyOne.com

There's this cool site called http://www.thesixtyone.com/, great for discovering new music (if they only agree to ban Foo Fighters, the site will be perfect). Discovering music but also discovering interesting web design patterns, as it turns out.

TheSixtyOne.com shows a progress indicator when you click a song, as if the background shows how the song gets loaded. So I had to try implementing this myself and I also played with two other variants of the background animation.

Here's a video, a little screencast to demonstrate how the loading looks like:

Here are the three examples, take a look at the code, there are no external JavaScript libraries, just some do-it-yourself animation with setInterval()

Example #1 - filling the background

For this you get an image that is at least as long as the container you're about to animate. The height of the background image doesn't matter, could be just one pixel. Here's the image I used.

Ar the start of the animation, the background image is so to the left, it's invisible. At the end of the animation, the background fills out the whole container.

Run example #1

Example #2 - overflowing background

This is a modified version of the previous pattern. Once the background is filled the animation keeps going, so the background escapes from view. Then it's moved back at the beginning and the animation repeats.

Run example #2

Example #3 - dancing arrow

If you remember old radios, this pattern looks like you're playing with the dial. Here, the background image is different, just a small square basically. It gets repeated vertically. Here's the backgournd.

Run example #3