r2547 - photoviewer: load next image in parallel

r2547 - photoviewer: load next image in parallel


Author: joern.zaefferer
Date: Wed May 13 03:45:16 2009
New Revision: 2547
Modified:
branches/photoviewer/ui/ui.photoviewer.js
Log:
photoviewer: load next image in parallel
Modified: branches/photoviewer/ui/ui.photoviewer.js
==============================================================================
--- branches/photoviewer/ui/ui.photoviewer.js    (original)
+++ branches/photoviewer/ui/ui.photoviewer.js    Wed May 13 03:45:16 2009
@@ -68,38 +68,37 @@
            if (!anchor)
                return;
            var self = this,
-                visible = this._viewer().is(":visible");
+                visible = this.viewerElement && this.viewerElement.is(":visible");
            this.currentAnchor = anchor;
            this._overlay().fadeIn();
-            function show() {
-                // TODO refactor
-                $(this).attr("src", anchor.href).one("load", function() {
-                    $(this).css("width", "").css("height", "");
-                    if (self.options.resize) {
-                        self._resize($(this));
-                    }
-                    $(this).css({
-                        left: $(window).width() / 2 - $(this).outerWidth() / 2,
-                        top: $(window).height() / 2 - $(this).outerHeight() / 2
-                    });
-                    if (visible) {
-                        $(this).effect("drop", {
-                            direction: direction == "up" ? "down" : "up",
-                            mode: "show"
-                        });
-                    } else {
-                        $(this).fadeIn();
-                    }
-                })
-            }
-            if (!direction) {
-                this._viewer().each(show);
-            } else {
+            
+            if (direction) {
                this._viewer().effect("drop", {
                    direction: direction
-                }, "normal", show);
+                }, "normal", function() {
+                    $(this).remove();
+                });
            }
            
+            this._viewer("new").attr("src", anchor.href).one("load", function() {
+                $(this).css("width", "").css("height", "");
+                if (self.options.resize) {
+                    self._resize($(this));
+                }
+                $(this).css({
+                    left: $(window).width() / 2 - $(this).outerWidth() / 2,
+                    top: $(window).height() / 2 - $(this).outerHeight() / 2
+                });
+                if (visible) {
+                    $(this).effect("drop", {
+                        direction: direction == "up" ? "down" : "up",
+                        mode: "show"
+                    });
+                } else {
+                    $(this).fadeIn();
+                }
+            })
+            
        },
        
        _resize: function(img) {
@@ -117,9 +116,12 @@
        close: function() {
            if (!this.currentAnchor)
                return;
+            var self = this;
            this.currentAnchor = null;
-            this._overlay().fadeOut();
-            this._viewer().fadeOut();
+            this._viewer().add(this._overlay()).fadeOut(function() {
+                $(this).remove();
+                self.overlayElement = self.viewerElement = null;
+            });
        },
        
        next: function() {
@@ -141,8 +143,8 @@
            this._display(target, direction);
        },
        
-        _viewer: function() {
-            if (!this.viewerElement) {
+        _viewer: function(create) {
+            if (create || !this.viewerElement) {
                this.viewerElement =
$("<img/>").addClass("ui-photoviewer").hide().appendTo(document.body);
            }
            return this.viewerElement;