sleepinglinks

A suggestion for "World stops turning on using background-image links"

Winfried Heymann did make an interesting test page for IE6: A link with a background-image won't show the normal behavior while loading (turning the globe or winlogo and processing bar). I suggest that this is caused by a dilemma: should the world turn while loading the page or while loading the background-image?

The link should have a blue background-image (please wait three seconds). If you click and move the cursor away, the world is turning until the yellow background-image is loaded. Then the world stops. After 5 seconds, the linked page is shown.

Please clear cache and history before each new trial (caching corrupts my delaying method, so no activity of the progress indicators is noticeable due to the speed of loading).

link to sleeptxt.php

blue: link

gray: visited

red: hover

yellow: active

The link has a 5x5px image for background-url/repeat-y, which is dynamically created via php. To illustrate the problem, the image-creation is delayed for 3 seconds. The linked page is delayed itself: 8 seconds. You'll see the IE's progress-bar/world-turning active while hovering or clicking. You'll see the freeze for 5 seconds until the page is loaded.

The activity of the progress-bar/world-turning-logo is due to the loading of the background-image. The progress indicators stop when the background-image is loaded, but the linked page will need another 5 seconds to be shown.

Whether there is a caching or not, different background-images or not: IE6 loads a background-image. This process will cause a progress indication (useful or not).

Discussion

I think its not a bug, but it is inconvenient to show the progress indicators while loading something illustrating like a background-image when its expected for loading the linked page.

Bruno Fassino commented that this problem corresponds to the annoying IE6-flicker. See his test page with further links. Thanks!

Last updated: July 15, 2004

Any ideas, workarounds, comments and corrections are appreciated.

Ingo Chao http://www.satzansatz.de

Code

Here is the relevant css part:

a.bgimg:link{
background: url('sleepimage.php?status=link') repeat-y;
}
a.bgimg:visited{
background: url('sleepimage.php?status=visited') repeat-y;
}
a.bgimg:hover{
background: url('sleepimage.php?status=hover') repeat-y;
}
a.bgimg:active{
background: url('sleepimage.php?status=active') repeat-y;
}

Here is the quick and dirty php code for sleepimage.php:

<?php
sleep (3); // waiting 3 seconds


$img = Loadpng( $_GET['status'] );  // get from url
header('Content-Type: image/png'); //send a header

ImagePNG($img); //image output



function Loadpng ($status) {
    $imgname= $status . ".png";  //string concat

// if you want to define your own images link.png, visited.png, hover.png, active.png

   $img = @ImageCreateFromPNG ($imgname);

//else create colored images

    if (!$img) {
        $img = ImageCreate (5, 5);  //new image
        switch($status){  //set color on status
        	case 'link':
            	 $bgc = ImageColorAllocate ($img, 0, 0, 0xFF); //blue
                 break;
            case 'visited':
            	 $bgc = ImageColorAllocate ($img, 0x84, 0x82, 0x84); //gray
                 break;
            case 'hover':
            	 $bgc = ImageColorAllocate ($img, 0xFF, 0, 0); //red
                 break;
            case 'active':
            	 $bgc = ImageColorAllocate ($img, 0xFF, 0xFF, 0); //yellow
                 break;
            default:
            	$bgc = ImageColorAllocate ($img, 0, 0, 0); //black on error
                 break;
            }

        ImageFill ($img, 0, 0, $bgc); //flood fill
    }
    return $img;
}
?>