pre-cache images on login

[kingbyu]

Images should be pre-cached so that pages load faster
on the users first visit.  

I suggest loading the images in a hidden layer on the
login page.  That way, as the user types in his
username and password, the browser is loading the
images in the background, without notice.

[r@…]

I don't really know what I'm doing but thought I'd try getting my feet wet. The question really is which images should be preloaded - probably not all 128. I assume the answer is to preload only those images which are likely to appear immediately after the user logs in. I also assume it would be a good idea to try to preload the smallest (size of file) images first because they'll load more quickly and have more of an effect visually - no reason to preload the 16KB rcube_watermark.png first (or at all) which might take 5 seconds over a dialup line if it means no other images have a chance to preload.

Well anyway I added a config option to turn preloading off and on:

--- config/main.inc.php Wed Dec 20 10:59:50 2006
+++ /usr/local/apache2/htdocs/config/main.inc.php       Tue Mar 27 10:29:24 2007

@@ -87,6 +88,9 @@
 // relative path to the skin folder
 $rcmail_config['skin_path'] = 'skins/default/';

+// fetch images while waiting for user login
+$rcmail_config['preload_images'] = TRUE;
+
 // use this folder to store temp files (must be writebale for apache user)
 $rcmail_config['temp_dir'] = 'temp/';

and some Javascript which does the work (images are loaded from smallest file size to largest):

--- program/include/main.inc    Sun Mar 18 14:46:03 2007
+++ /usr/local/apache2/htdocs/program/include/main.inc  Tue Mar 27 10:28:31 2007

@@ -1841,6 +1857,8 @@
   {
   global $CONFIG, $OUTPUT, $JS_OBJECT_NAME, $SESS_HIDDEN_FIELD;

+  $skin_path = $CONFIG['skin_path'];
+
   $labels = array();
   $labels['user'] = rcube_label('username');
   $labels['pass'] = rcube_label('password');
@@ -1912,6 +1930,69 @@
 $form_end
 EOF;

+  if ($CONFIG['preload_images'])
+  {
+   $out .= <<<EOF
+
+<script type="text/javascript">
+<!--
+
+var index = 0;
+preload  = new Array();
+preload[0] = "$skin_path/images/sort_desc.gif";
+preload[1] = "$skin_path/images/icons/reset.gif";
+preload[2] = "$skin_path/images/dimple.png";
+preload[3] = "$skin_path/images/icons/dot.png";
+preload[4] = "$skin_path/images/buttons/last_act.png";
+preload[5] = "$skin_path/images/buttons/first_pas.png";
+preload[6] = "$skin_path/images/buttons/next_act.png";
+preload[7] = "$skin_path/images/listheader_aqua.gif";
+preload[8] = "$skin_path/images/buttons/previous_pas.png";
+preload[9] = "$skin_path/images/listheader_dark.gif";
+preload[10] = "$skin_path/images/icons/replied.png";
+preload[11] = "$skin_path/images/searchfield.gif";
+preload[12] = "$skin_path/images/icons/folder-drafts.png";
+preload[13] = "$skin_path/images/icons/folder-inbox.png";
+preload[14] = "$skin_path/images/icons/folder-sent.png";
+preload[15] = "$skin_path/images/icons/attachment.png";
+preload[16] = "$skin_path/images/icons/folder-closed.png";
+preload[17] = "$skin_path/images/buttons/addressbook.gif";
+preload[18] = "$skin_path/images/icons/folder-junk.png";
+preload[19] = "$skin_path/images/buttons/logout.gif";
+preload[20] = "$skin_path/images/buttons/settings.gif";
+preload[21] = "$skin_path/images/buttons/mail.gif";
+preload[22] = "$skin_path/images/buttons/print_pas.png";
+preload[23] = "$skin_path/images/buttons/forward_pas.png";
+preload[24] = "$skin_path/images/buttons/compose_act.png";
+preload[25] = "$skin_path/images/buttons/reply_pas.png";
+preload[26] = "$skin_path/images/buttons/inbox_act.png";
+preload[27] = "$skin_path/images/buttons/replyall_pas.png";
+preload[28] = "$skin_path/images/taskbar.gif";
+preload[29] = "$skin_path/images/buttons/delete_pas.png";
+preload[30] = "program/blank.gif";
+preload[31] = "$skin_path/images/buttons/reply_act.png";
+preload[32] = "$skin_path/images/buttons/replyall_act.png";
+preload[33] = "$skin_path/images/buttons/forward_act.png";
+preload[34] = "$skin_path/images/buttons/print_act.png";
+preload[35] = "$skin_path/images/buttons/delete_act.png";
+preload[36] = "$skin_path/images/display/loading.gif";
+preload[37] = "$skin_path/images/icons/plus.gif";
+preload[38] = "$skin_path/images/buttons/compose_pas.png";
+preload[39] = "$skin_path/images/buttons/inbox_pas.png";
+preload[40] = "$skin_path/images/buttons/next_pas.png";
+preload[41] = "$skin_path/images/buttons/last_pas.png";
+preload[42] = "$skin_path/images/icons/deleted.png";
+
+for(index = 0; index < preload.length; index++)
+{
+ imageObj = new Image();
+ imageObj.src = preload[index];
+}
+
+//-->
+</script>
+EOF;
+  }
   return $out;
   }

Hopefully this will be of use to someone.

[r@…]

Well I don't really think the severity of this bug should be "critical"...

[seansan]

Review in 0.1.5. Methods exist to implement nowadays

[tensor]

Nice feature to have.

[dan]

ticket #1485800 makes browser cache the images and use them on the next session even if SSL. Still has more images to download the first time but subsequent logins are a lot quicker.

Still a pretty good idea though.

[alec]

Implemented in [8e211adb].