Ticket #1451160 (assigned Feature Requests: None)

Opened 3 years ago

Last modified 11 days ago

pre-cache images on login

Reported by: kingbyu Owned by: nobody
Priority: 5 Milestone: later
Component: User Interface Version: None
Severity: normal Keywords:
Cc:

Description (last modified by thomasb) (diff)

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.

Change History

Changed 19 months ago by r@…

  • severity set to critical

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.

Changed 19 months ago by r@…

  • severity changed from critical to normal

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

Changed 8 months ago by seansan

  • summary changed from pre-cache images to pre-cache images on login
  • milestone set to 0.1.5

Review in 0.1.5. Methods exist to implement nowadays

Changed 7 months ago by thomasb

  • description modified (diff)
  • milestone changed from 0.2.5 to later

Changed 11 days ago by tensor

Nice feature to have.

Note: See TracTickets for help on using tickets.