当图像加载到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不再受阻，现在我可以看到较慢的图像随后被异步解析了。