Images now have auto-generated icons for them.

It was interesting developing these – a major difference between Internet programming and desktop applications, is the extreme slowness of the Internet at times.

As an example, I’ll walk through an experience of loading up the Test directory in the demo (click the image icon, then Browse Server), while my computer is under a heavy network load (I have discovered the treasure of public domain films).

1. Initial file directory, with icons depending on the extension of the file:
   
2. The browser then requests the addresses of different icons for those files that might be images (again, based on the extension):
   
3. The browser finally finishes replacing the icons.
   

On a slow network, the major bottleneck was step 2 above. The reason for this was that when a browser is asked to replace the background image of an element, it does it immediately, whether that image is in its memory yet or not. Notice that there are two empty spaces there – those oare icons where the original default icon has been cleared, but the new replacements have not yet loaded.

So, the solution was to first load the image, then replace the element’s background.

How? Simple:

    var img=newImg(image_data.icon);
    setStyles(img,'width:1px;height:1px');
    img.onload=function(){
      var p=this.parentNode;
      setStyles(p,'backgroundImage:url("'+p.kfm_attributes.image_data.icon+'")');
      p.removeChild(this);
    }
    el.appendChild(img);
    el.kfm_attributes.image_data=image_data;

Obviously in the above, el is the icon element, and image_data is some data retrieved from the server about the image.

Now, that’s all nice and dandy, and solves the huge “blank space” issue, but it still takes a little bit of time to load. What if you need to go back to that directory at some future time?

Obviously, a bit of caching is needed. If you need to view that directory again, load up the file list as normal, then see if there is a cached copy of that file’s data. In the kfm, I store this data in kfm_filesCache. For example, the line directly after the above block is this:

    kfm_filesCache[kfm_cwd+'/'+file]=el.kfm_attributes;

There is a subtle problem here, though, which can trip up even the most experienced web developers every now and then – what if the image changes? Obviously, if you change an image (rotate, etc), then you want the icon to also change. This can be tricky if you only refer to the image as “blah.png”.

Solution to this is to change the src of the image to “blah.png?5897451” (a random number) or similar, and cache /that/ address, then when the image changes, simply remove the cached copy (set it equal to null), then rebuild the data. The new icon will have a different random number, so will reload.

For example, the line directly preceding the block above is this one:

   if(!kfm_filesCache[kfm_cwd+'/'+file])image_data.icon=image_data.icon+'?'+Math.random();

I hope this was helpful to someone, and not just of interest to myself 😉

Share this:

• Click to share on Facebook (Opens in new window)
• Click to share on Twitter (Opens in new window)
• Click to share on LinkedIn (Opens in new window)

Like this:

Like Loading...