Select2 blocks while images load into DOM

Question

I use Select 2 to show entries from database which have a imageurl.

My format-function for the dropdown items looks like this:

function formatDropDown(item) {
            var result = "<img src='" + item.MapImageUrl + "'>&nbsp;" + item.Name
            return result;
        }

item.MapImageUrl contains a simple url to the image that should be displayed.

Now the server takes a second or two to resolve the images beiing displayed. Unfortunately the DropwDown blocks in this time.

I create the select2 with the following code:

    stationSelector.select2({
        placeholder: 'Choose station',
        allowClear: true,
        data: { results: stations, text: 'Name' },
        formatSelection: formatDisplay,
        formatResult: formatDropDown,

Is there any way to make select not waiting / blocking till the image is loaded? It would be nice, if i could use / open the box without blocking and then the images would appear afterwards.

Are there extensions for deferred image loading?

Answer 1

At least i found a solution.

Using a style which sets the background, doesnt cause this issue.

so my format Method looks now like this:

  function formatDropDown(item) {    
            var result = "<div style='background-image:url('" + item.MapImage + "');'></div>&nbsp;" + item.Name;
            return result;
        }

the select2 isn't blocking anymore and now I can see that the slower images are resolved asynchronously afterwards.