当图像加载到DOM时，选择2个块

Question

我使用Select 2来显示数据库中具有图像的条目。

下拉项目的格式化功能如下所示：

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,

在图像加载之前，有没有办法让选择不等待/阻止？ 如果我可以在没有阻挡的情况下使用/打开盒子然后图像会在之后出现，那就太好了。

是否有延迟图像加载的扩展名？

Answer 1

至少我找到了解决方案。

使用设置背景的样式不会导致此问题。

所以我的格式方法现在看起来像这样：

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

select2不再阻塞，现在我可以看到之后异步解析较慢的图像。