jQuery tmpl display loading image on images

I have a template like so

<script id="itemtemplate" type="text/x-jquery-tmpl">
    <img id="pho开发者_高级运维to${id}" src="${$item.image(filename)}" />
</script>

which works nicely with displaying images but between the page loading and the image actually being displayed, I would like to have an ajax-loading animated gif.

So my initial template would look like so

<script id="itemtemplate" type="text/x-jquery-tmpl">
    <img id="photo${id}" src="../../media/images/loadingsm.gif" />
</script>

Now when the template gets fired, the src is replaced with ${$item.image(filename)}