javascript - 当图像加载到 DOM 中时 Select2 block

Question

我使用 Select 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 不再阻塞，现在我可以看到较慢的图像随后异步解析。