Javascript Image Replacement spotty in FF

Question

Any reason why this works every time in Safari but only SOME of the time in FF 3.6?

<ul id="row-0" class="row group">
    <li class="left thumb">
        <img id="img-1" src="img/ajax.gif" />
    </li>

    <li class="left thumb">
        <img id="img-2" src="img/ajax.gif" />
    </li>
</ul>

<script>
    var flixThumbs = {
        thumbs: [
            { 
                src: "img/03.jpg",
                id: "img-03"
            },
            { 
                src: "img/04.jpg",
                id: "img-04"
            },
            { 
                src: "img/05.jpg",
                id: "img-05"
            },
            { 
                src: "img/06.jpg",
                id: "img-06"
            }
        ]
    }
    var imgID = document.getElementById('img-1');
    imgID.src = flixThumbs.thumbs[2].src;

    var imgID = document.getElementById('img-2');
    imgID.src = flixThumbs.thumbs[3].src;
</script>

The original ajax.gif is disappearing from the DOM but when I inspect with Firebug, I see that the new img tag that has replaced it is greyed out and not being displayed in the browser. Am I missing something?

Answer 1

The document may not be ready by the time the code is executed. Try it this way

window.onload = function() {
    var imgID = document.getElementById('img-1');
    imgID.src = flixThumbs.thumbs[2].src;

    var imgID = document.getElementById('img-2');
    imgID.src = flixThumbs.thumbs[3].src;
}