画像がDOMにロードされている間にSELECT2ブロック

Question

ImageURLを持つデータベースからのエントリを表示するには、2を使います。

ドロップダウン項目のマイフォーマット機能このようになります。

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

.

item.mapimageUrl表示する必要がある画像への単純なURLを含みます。

今すぐサーバーに2つまたは2つが表示され、画像が表示されているイメージを解決します。残念ながらこの時期のDropwdownブロック。

次のコードでSELECT2を作成します。

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

.

画像がロードされるまで、選択していない/ブロックを選択する方法はありますか？ ブロックせずにボックスを使用/開くことができれば素晴らしいでしょう。その後、画像はその後表示されます。

遅延画像の積載のための拡張はありますか？

Answer 1

少なくとも私は解を見つけた。

背景を設定するスタイルを使用してこの問題を引き起こしません。

だから私のフォーマット方法は今こそこんなところです：

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

.

SELECT2はもうブロックされていないので、より遅い画像は後で非同期的に解決されることがわかります。