Javascript Error onload image fadeIn
<p>I am getting an inconsistent error with my script. Often times everything works fine, however, every now and then I am getting the following error: <code>ReferenceError: fadeIn is not defined</code></p>

<p>Here is the relevant code:</p>

<p>In the <code>&lt;head&gt;</code></p>

<pre><code>    &lt;script type="text/javascript" charset="utf-8"&gt;
        window.fadeIn = function(obj) {
            var item = $(obj).parent();
            item.fadeIn(1000);
        }
    &lt;/script&gt;
</code></pre>

<p>In the <code>&lt;body&gt;</code></p>

<pre><code> &lt;div class="item" style="display:none"&gt;&lt;img onload="fadeIn(this)" src="/uploads/thumbs/{{image.url}}"&gt;&lt;br&gt;{{ image.description }}&lt;/div&gt;
</code></pre>

<p>Again, The images are loading and fading in most of the time but every now and then I get the error and the images do not fade in. </p>

<p>Is there a better way to approach this? Or just something I'm missing?</p>
