Javascript 动态创建的img不会在Chrome中显示src图像，除非样式发生更改

我正在使用图像选择器在服务器上显示图像。 我结合了模态弹出框的例子

在DocumentReady上，我从php脚本中获取选择器的内容。 因此，它只是我服务器上文件夹中每个图像的一个示例

只要我更改了 对话框通过单击按钮显示要阻止的样式。 如果在加载内容后以编程方式对其进行更改，则图像 在Chrome上不可见

我用这个来显示弹出窗口：

$('#myModal').css("display", "block");

在FireFox中它是有效的，但在Chrome中我只得到了边框。 查看调试器中的“网络”选项卡，我可以看到 已加载。对样式进行任何可见的更改都将显示图像

我想，这与Chrome在加载图像或类似的东西之前不渲染类似。但是我能做些什么来解决这个问题呢

我正在添加使用相同对话框上载文件的功能，并希望在上载新图像后立即更新图像选择器。

---

我在这里也遇到了同样的问题，第一个描述的复制方法更简单、更快。

这个问题是通过使用imagesloaded库和强制重画解决的

     $('.image_picker_selector').imagesLoaded(function () {
        document.getElementById('modalImgSelector').style.display = "none";
        document.getElementById('modalImgSelector').offsetHeight; //Only ref needed
        document.getElementById('modalImgSelector').style.display = "block";
    });

这将在加载所有图像时强制重新绘制。

---

这可能不是最好的解决方案，但它不会显示任何闪烁或任何东西。

您能创建一个stacksnippets或plnkr来演示吗？看，我不能那样做。该站点不运行php脚本。但是我的代码正在运行，它正在加载数据，我正在初始化图像选择器。但是在我改变css之前，Chrome没有高度和宽度（我想这会迫使重新呈现内容）