Select2 blocs pendant que des images se chargent dans DOM

Question

J'utilise Select 2 pour afficher les entrées de la base de données qui ont une image imageRL.

Ma fonction de format pour les éléments déroulants ressemble à ceci:

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

item.mapimageURL contient une URL simple à l'image qui doit être affichée.

Maintenant, le serveur prend une seconde ou deux pour résoudre les images beiing affichées.Malheureusement, les blocs Dropwdown à cette époque.

i Créez le Select2 avec le code suivant:

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

Y a-t-il un moyen de sélectionner ne pas attendre / bloquer jusqu'à ce que l'image soit chargée? Ce serait bien, si je pouvais utiliser / ouvrir la boîte sans bloquer, puis les images apparaissent ensuite.

Y a-t-il des extensions pour le chargement différé de l'image?

Answer 1

au moins j'ai trouvé une solution.

Utiliser un style qui définit l'arrière-plan, ne provoque pas ce problème.

Donc, ma méthode de format ressemble maintenant à ceci:

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

Le Select2 ne bloque plus et maintenant, je peux voir que les images plus lentes sont résolues de manière asynchrone.