Image in formatSelection markup is broken when sending user to new page on selecting event

Question

If I have an markup for the formatSelection which includes an image and have window.location.href in the select2-selecting event, the image is broken. If I remove window.location.href, the image works and can be seen just before the new page is loaded.

$('.select2#topbarSearch').on("select2-selecting", function(e) { 
    window.location.href = 'www.example.com';
});


function selectionFormat(data) {

        var markup = "<table class='search-result'><tr>";
        if (data.image !== undefined) {
            markup += "<td class='data-image'><img style='height: 25px;' src='" + data.image + "'/></td>";
        }
        markup += "<td class='data-info-selected'><div class='data-title'>" + data.title + "</div>";
        markup += "</td></tr></table>";
        return markup;
}

Answer 1

The image has to be verified that it's done loaded before redirecting the user.

var img = new Image();
img.src = e.object.image;
img.onload = function(){
    window.location.href = scriptPath + 'item/' + e.object.id;
};