Strange image object behaviour in IE. Is my solution the best one?
<p>I have a function which receives <strong>either</strong> a preloaded <strong>JS image object</strong> or an <strong>image url</strong>.  This is passed in as the <code>photo</code> variable.</p>

<p>I perform a check to see whether the 'photo' var is a string or not.  If it is I create a new image object and use the onload event to fire the generateSlide() function passing in the newly created image object as seen below:</p>

<pre><code>renderSlide: function (slideindex, photo, external, count, text) {
        var self = this;
        var image = new Image();
        if (typeof (photo) == 'string') {
            image.onload = function () {
                self.generateSlide(slideindex, image, external, count, text);
            };
            image.src = photo;
        } else {
            image.src = photo.src;
            self.generateSlide(slideindex, image, external, count, text);
        }
 },
</code></pre>

<p>If the 'photo' var is a preloaded JS image object I simply run the function itself passing the image object into generateSlide();</p>

<p>Everything works great however for some reason in IE 9 I cannot simply pass through the 'photo' var directly into the generateSlide() function.  I have to create a new image object and set the src to match the photo object's src attribute.</p>

<p>This makes no sense to me and I can't understand why this would be?</p>

<p>In the cases where the photo var is an actual JS image object it is confirmed as loaded elsewhere. ( I am preloading assets );</p>

<p>In summary, the code above works fine but can anyone explain <strong>WHY</strong> I have to create a new image object and cannot simple pass in the original one? Is there a more elegant solution?  So far I haven't noticed any problems with the above method but is anyone aware of any pitfalls using this approach.</p>

<p>Thanks in advance</p>
