r2579 - photoviewer: show loading indicator after 250ms
Author: joern.zaefferer
Date: Fri May 15 01:34:45 2009
New Revision: 2579
Added:
branches/photoviewer/tests/visual/photoviewer/
branches/photoviewer/tests/visual/photoviewer/default.html (contents,
props changed)
branches/photoviewer/tests/visual/photoviewer/photo.jpg (contents,
props changed)
branches/photoviewer/tests/visual/photoviewer/photo.php
branches/photoviewer/themes/base/images/ajax-loader.gif (contents,
props changed)
Modified:
branches/photoviewer/themes/base/ui.photoviewer.css
branches/photoviewer/ui/ui.photoviewer.js
Log:
photoviewer: show loading indicator after 250ms
Added: branches/photoviewer/tests/visual/photoviewer/default.html
==============================================================================
--- (empty file)
+++ branches/photoviewer/tests/visual/photoviewer/default.html Fri May 15
01:34:45 2009
@@ -0,0 +1,37 @@
+<!doctype html>
+<html lang="en">
+<head>
+ <title>jQuery UI Photoviewer - Default functionality</title>
+ <link rel="stylesheet" href="../../../themes/base/ui.all.css"
type="text/css" media="screen">
+ <script type="text/javascript" src="../../../jquery-1.3.2.js"></script>
+ <script type="text/javascript"
src="../../../external/jquery.mousewheel-3.0.2.js"></script>
+ <script type="text/javascript" src="../../../ui/ui.core.js"></script>
+ <script type="text/javascript" src="../../../ui/effects.core.js"></script>
+ <script type="text/javascript" src="../../../ui/effects.drop.js"></script>
+ <script type="text/javascript"
src="../../../ui/ui.photoviewer.js"></script>
+
+ <link type="text/css" href="../demos.css" rel="stylesheet" />
+
+ <script type="text/javascript">
+ $(function() {
+ $("#photos").photoviewer();
+ });
+ </script>
+ <style>
+ a img {
+ border: none;
+ }
+ </style>
+</head>
+<body>
+
+ <div id="photos">
+ <a href="photo.php" title="Flight">
+ <img src="photo.jpg" />
+ </a>
+ </div>
+
+<div style="height:1200px; visibility: hidden">big div to make page
scroll</div>
+
+</body>
+</html>
Added: branches/photoviewer/tests/visual/photoviewer/photo.jpg
==============================================================================
Binary file. No diff available.
Added: branches/photoviewer/tests/visual/photoviewer/photo.php
==============================================================================
--- (empty file)
+++ branches/photoviewer/tests/visual/photoviewer/photo.php Fri May 15
01:34:45 2009
@@ -0,0 +1,5 @@
+<?php
+usleep(500000);
+header("Content-type: image/jpeg");
+echo file_get_contents("photo.jpg");
+?>
Added: branches/photoviewer/themes/base/images/ajax-loader.gif
==============================================================================
Binary file. No diff available.
Modified: branches/photoviewer/themes/base/ui.photoviewer.css
==============================================================================
--- branches/photoviewer/themes/base/ui.photoviewer.css (original)
+++ branches/photoviewer/themes/base/ui.photoviewer.css Fri May 15 01:34:45
2009
@@ -1,3 +1,4 @@
/* Photoviewer
----------------------------------*/
.ui-photoviewer { position: absolute; z-index: 1000; border: 20px solid
white; /* for IE7 */ -ms-interpolation-mode: bicubic; }
+.ui-loading-indicator { position: absolute; text-indent: -10000px; width:
32px; height: 32px; background-image: url(images/ajax-loader.gif); }
Modified: branches/photoviewer/ui/ui.photoviewer.js
==============================================================================
--- branches/photoviewer/ui/ui.photoviewer.js (original)
+++ branches/photoviewer/ui/ui.photoviewer.js Fri May 15 01:34:45 2009
@@ -70,6 +70,22 @@
}
},
+ showLoadingIndicator: function() {
+ var self = this;
+ this.loadingIndicatorTimeout = setTimeout(function() {
+ if (!self.loadingIndicator) {
+ self.loadingIndicator = self._element("div", "ui-loading-indicator");
+ }
+ self._position(self.loadingIndicator);
+ self.loadingIndicator.fadeIn("slow");
+ }, 250);
+ },
+
+ hideLoadingIndicator: function() {
+ clearTimeout(this.loadingIndicatorTimeout);
+ this.loadingIndicator && this.loadingIndicator.hide();
+ },
+
close: function() {
if (!this.currentAnchor)
return;
@@ -117,8 +133,10 @@
previous.remove();
});
}
+ this.showLoadingIndicator();
this._viewer("new").attr("title", anchor.title +
this.options.titleSuffix).attr("src", anchor.href).one("load", function() {
+ self.hideLoadingIndicator();
self._resize($(this));
self._position($(this));
self._overlay().attr("title", anchor.title + self.options.titleSuffix)