Question

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>

Answer 1

The src is not “blank” it is a relative URI that resolves to the URI of the current document, since that is an HTML document, it is not an image so an error will be thrown.

Depending on the browser, it may or may not generate a box of the size you specify for an invalid image.

The solution is to not insert images into the DOM (via HTML or JS) that don’t have src attributes containing the URI of an actual image.

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.

You have explicitly set the div elements to display: inline. The width property does not apply to inline elements.