pre-cache images on login

rcubetrac commented 18 years ago

Reported by kingbyu on 16 Mar 2006 10:40 UTC as Trac ticket #1451160

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.

Keywords: cache images login Migrated-From: http://trac.roundcube.net/ticket/1451160

rcubetrac commented 17 years ago

Comment by r on 27 Mar 2007 15:22 UTC

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[= 'skins/default/';

+// fetch images while waiting for user login
+$rcmail_config['preload_images']('skin_path']) = TRUE;
+
 // use this folder to store temp files (must be writebale for apache user)
 $rcmail_config[= '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']('temp_dir']);
+
   $labels = array();
   $labels[= rcube_label('username');
   $labels['pass']('user']) = rcube_label('password');
@@ -1912,6 +1930,69 @@
 $form_end
 EOF;

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

rcubetrac commented 17 years ago

Severity changed by r on 27 Mar 2007 15:22 UTC

=> critical

rcubetrac commented 17 years ago

Comment by r on 27 Mar 2007 15:24 UTC

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

rcubetrac commented 17 years ago

Severity changed by r on 27 Mar 2007 15:24 UTC

critical => normal