當圖像加載到DOM中時，Select2塊

Question

我使用選擇2來顯示數據庫中具有imageurl的條目。

我的下拉菜單項的格式函數如下所示：

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

item.MapImageUrl包含一個應顯示圖像的簡單URL。

現在，服務器需要一兩秒鍾來解決顯示的圖像。 不幸的是，這次DropwDown會阻塞。

我用以下代碼創建select2：

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

有什么方法可以使select在加載圖像之前不等待/阻止嗎？ 很好，如果我可以使用/打開盒子而不會阻塞，然后圖像將隨后出現。

是否有延期加載圖像的擴展名？

Answer 1

至少我找到了解決方案。

使用設置背景的樣式不會導致此問題。

所以我的格式方法現在看起來像這樣：

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

select2不再受阻，現在我可以看到較慢的圖像隨后被異步解析了。