diff --git a/examples/popupMatrix.html b/examples/popupMatrix.html
index 0829c44a04..c93a7bdcf2 100644
--- a/examples/popupMatrix.html
+++ b/examples/popupMatrix.html
@@ -879,11 +879,24 @@
       <div id="map" class="smallmap"></div>
 
         <!-- preloading these images so the autosize will work correctly -->
-        <img src="small.jpg" style="position:absolute; top:-5000px; left: -5000px"></img>
         <img src="wideshort.jpg" style="position:absolute; top:-5000px; left: -5000px"></img>
         <img src="widelong.jpg" style="position:absolute; top:-5000px; left: -5000px"></img>
         <img src="thinlong.jpg" style="position:absolute; top:-5000px; left: -5000px"></img>
 
+       <p> All of the images in this file a pre-cached, meaning they are 
+           loaded immediately when you load the page (they are just placed 
+           far offscreen, that's why you don't see them). 
+       </p>
+       <br>    
+       <p> The only image that is *not* preloaded is small.jpg, the brazilian
+           flag. We do this in order to test out to make sure that our auto-sizing
+             code does in fact activate itself as the images load. To verify 
+             this, clear your cache and reload this example page. Click on 
+             any of the markers in the 'AutoSize' row. If the popup autosizes
+             to correctly contain the entire flag: golden. If the popup is 
+             tiny and you can only see a corner of it, then this code is broken.
+        </p>
+
       <br/>      
 
       
diff --git a/lib/OpenLayers/Popup.js b/lib/OpenLayers/Popup.js
index 5e920b706d..b1ffab6353 100644
--- a/lib/OpenLayers/Popup.js
+++ b/lib/OpenLayers/Popup.js
@@ -590,15 +590,75 @@ OpenLayers.Popup = OpenLayers.Class({
         if ((this.contentDiv != null) && 
             (this.contentHTML != null) &&
             (this.contentHTML != this.contentDiv.innerHTML)) {
+       
             this.contentDiv.innerHTML = this.contentHTML;
-        }    
+       
+            if (this.autoSize) {
+                
+                //if popup has images, listen for when they finish
+                // loading and resize accordingly
+                this.registerImageListeners();
 
-        if (this.autoSize) {
-            this.updateSize();
-        }
+                //auto size the popup to its current contents
+                this.updateSize();
+            }
+        }    
 
     },
     
+    /**
+     * Method: registerImageListeners
+     * Called when an image contained by the popup loaded. this function
+     *     updates the popup size, then unregisters the image load listener.
+     */   
+    registerImageListeners: function() { 
+
+        // As the images load, this function will call updateSize() to 
+        // resize the popup to fit the content div (which presumably is now
+        // bigger than when the image was not loaded).
+        // 
+        // If the 'panMapIfOutOfView' property is set, we will pan the newly
+        // resized popup back into view.
+        // 
+        // Note that this function, when called, will have 'popup' and 
+        // 'img' properties in the context.
+        //
+        var onImgLoad = function() {
+            
+            this.popup.updateSize();
+     
+            if ( this.popup.visible() && this.popup.panMapIfOutOfView ) {
+                this.popup.panIntoView();
+            }
+
+            OpenLayers.Event.stopObserving(
+                this.img, "load", this.img._onImageLoad
+            );
+    
+        };
+
+        //cycle through the images and if their size is 0x0, that means that 
+        // they haven't been loaded yet, so we attach the listener, which 
+        // will fire when the images finish loading and will resize the 
+        // popup accordingly to its new size.
+        var images = this.contentDiv.getElementsByTagName("img");
+        for (var i = 0, len = images.length; i < len; i++) {
+            var img = images[i];
+            if (img.width == 0 || img.height == 0) {
+
+                var context = {
+                    'popup': this,
+                    'img': img
+                };
+
+                //expando this function to the image itself before registering
+                // it. This way we can easily and properly unregister it.
+                img._onImgLoad = OpenLayers.Function.bind(onImgLoad, context);
+
+                OpenLayers.Event.observe(img, 'load', img._onImgLoad);
+            }    
+        } 
+    },
 
     /**
      * APIMethod: getSafeContentSize