我正在使用图像选择器在服务器上显示图像。 我已将其与模态弹出框示例相结合。
准备好文档后,我从 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";
});
这会在所有图像加载完毕后强制重绘。 这可能不是最好的解决方案,但它可以正常工作,不会出现任何闪烁或任何情况。
关于javascript - 除非更改样式,否则动态创建的 img 不会在 Chrome 中显示 src 图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43670565/