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

这会在加载所有图像时强制重绘。它可能不是最好的解决方案，但它可以在不显示任何闪烁或任何东西的情况下工作。

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

1 个答案: