I'm having a problem where my second image is appearing in the place where my first image should be appearing which causes a flickering effect (from positioning) when the first image actually exists. I thought this would be super simple so I'd love an education on this.

My HTML

```
<img id="image1" src="" width="32"/>
<img id="image2" src="" width="32"/>

```

My JQuery

```
$(function(){
    //$('#image1').attr('src','http://www.w3schools.com/html/smiley.gif');
    $('#image2').attr('src','http://www.w3schools.com/html/smiley.gif');
});

```

I tried encapsulating the images in fixed width divs (like so) as well to no avail, the div's widths to not stay fixed either.

```
<div style="width: 32px; display: inline;"><img id="image1" src="" width="32"/></div>
<div style="width: 32px; display: inline;"><img id="image2" src="" width="32"/></div>

```