javascript - 除非更改样式，否则动态创建的 img 不会在 Chrome 中显示 src 图像

Question

我正在使用图像选择器在服务器上显示图像。我已将其与模态弹出框示例相结合。

准备好文档后，我从 php 脚本中获取选择器的内容。所以它只是我服务器上文件夹中每个图像的一个。

这在我测试的所有浏览器中都工作正常，只要我改变对话框显示样式以通过单击按钮来阻止。如果我在加载内容后以编程方式更改它，图像在 Chrome 上将不可见。

我用它来显示弹出窗口:

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

在 FireFox 中它可以工作，但在 Chrome 中我只能得到边框。查看调试器中的网络选项卡，我可以看到图像被加载。对样式进行任何可见的更改都会显示图像。

这与 Chrome 在图像加载或类似情况之前不呈现有关，我想。但是我能做些什么来解决这个问题呢？

我正在添加使用相同对话框上传文件的功能，并希望在上传新图像后立即更新图像选择器。我在这里遇到了同样的问题，第一个描述的重现此问题的方法更简单、更快捷。

Answer 1

使用 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";
    });

这会在所有图像加载完毕后强制重绘。这可能不是最好的解决方案，但它可以正常工作，不会出现任何闪烁或任何情况。