Chaining load events

HTML

<html>
    <head></head>
    <body>
        <div id="main">
        </div>
    </body>
</html>

JavaScript

var imgQueue = [
    "http://placehold.it/200&text=one",
    "http://placehold.it/200&text=two",
    "http://placehold.it/200&text=three",
    "http://placehold.it/200&text=kittens",
    "http://placekitten.com/200"
]

function loadNextImage() {
    if (imgQueue.length > 0) {
        var imgN = new Image();
        imgN.src = imgQueue.shift();
        $(imgN).load(function(){
            $("#main").append(imgN);
            loadNextImage();
        });
    }
}
    
    
$(document).ready(function(){
    loadNextImage();
})