Javascript 图像加载后弹出

我正在尝试创建一个带有图像的弹出窗口，我希望弹出窗口与图像具有相同的纵横比。但我只知道image.onload上的图像尺寸。 所以我需要的是在image.onload之后的弹出窗口。但浏览器将其视为不需要的弹出窗口，并将阻止它。即使它是用户单击后唯一的弹出窗口

我已经尝试过先创建弹出窗口，然后再更改内容和大小，但即使这样做有效，有时也会导致弹出窗口隐藏在背景中，无法再次返回到前面（windows上的chrome）

是否有办法确保延迟弹出窗口仍然挂接到用户的点击上？ 或者其他一些建议

我希望使用的代码：

    selectURL: function(url) {
        // Check for images, otherwise just simply open the file by the browser.
        if(url.match(/(jpe?g|png|gif|bmp)$/gim)) {
            // Check if colorbox exists and use if so.
            if($.colorbox) {
                $.colorbox({
                    maxWidth:'80%',
                    maxHeight:'80%',
                    fixed: true,
                    scrolling: false,
                    href: url,
                    open: true,
                    photo: true
                });
            } else {
                // New image object so we can calculate the required popup size on load
                var myImage = new Image();
                myImage.src = url;
                // Close current window to make sure focus works
                if(typeof(popupWindow) !== 'undefined') {
                    popupWindow.close();
                }
                // Temporary loading image
                popupWindow = window.open('/images/loading.gif','popupWindow','height=400,width=600,resizable=no,scrollbars=no,top=200,left=200');
                if (window.focus) {
                    popupWindow.focus();
                }
                // Calculator and actual image opener :)
                myImage.onload = function() {
                    var maxWidth  = 600,
                        maxHeight = 600;
                    // Close existing popup
                    if(typeof(popupWindow) !== 'undefined') {
                        popupWindow.close();
                    }

                    if(this.width < maxWidth && this.height < maxHeight) {
                        popupWindow = window.open(this.src,'popupWindow','height='+this.height+',width='+this.width+',resizable=no,scrollbars=no,top=200,left=200');
                    } else if(this.width === this.height) {
                        popupWindow = window.open(this.src,'popupWindow','height='+maxHeight+',width='+maxWidth+',resizable=yes,scrollbars=yes,top=200,left=200');
                    } else if(this.width < this.height) {
                        popupWindow = window.open(this.src,'popupWindow','height='+maxHeight+',width='+(maxHeight / this.height * this.width)+',resizable=yes,scrollbars=yes,top=200,left=200');
                    } else {
                        popupWindow = window.open(this.src,'popupWindow','height='+(maxWidth / this.width * this.height)+',width='+maxWidth+',resizable=yes,scrollbars=yes,top=200,left=200');
                    }
                    if (window.focus) {
                        popupWindow.focus();
                    }
                }
            }
        } else {
            window.open(url);
        }
    }

选择url：函数（url）{
//检查图像，否则只需通过浏览器打开文件即可。
if（url.match（/（jpe？g | png | gif | bmp）$/gim））{
//检查colorbox是否存在，如果存在，请使用。
如果（$.colorbox）{
$彩色盒({
maxWidth:'80%'，
最大高度：'80%'，
修正：对，
滚动：false，
href:url，
开放：是的，
照片：真的
});
}否则{
//新的图像对象，以便我们可以计算加载时所需的弹出窗口大小
var myImage=新图像（）；
myImage.src=url；
//关闭当前窗口以确保焦点工作
if（typeof（popupWindow）！=‘未定义’）{
popupWindow.close（）；
}
//临时加载映像
打开（'/images/loading.gif'，'popupWindow'，'height=400，width=600，resizeable=no，scrollbars=no，top=200，left=200'）；
if（window.focus）{
popupWindow.focus（）；
}
//计算器和实际图像开启器：）
myImage.onload=函数（）{
var maxWidth=600，
最大高度=600；
//关闭现有弹出窗口
if（typeof（popupWindow）！=‘未定义’）{
popupWindow.close（）；
}
if（this.width

如果显示包含

加载.gif

的弹出窗口，则浏览器可能不喜欢您单击一次打开两个弹出窗口。

您可以尝试打开一个弹出窗口以显示image.html，在该窗口中，您可以在计算目标图像大小的同时显示正在加载的图像，然后在知道尺寸后使用

window.resizeTo（）

调整窗口大小。

我建议使用URL变量告诉

show image.html

目标图像文件名，例如

show image.html？image=foo.bar

甚至

show image.html？foo.bar

。请注意，如果要使用这种方法，应确保从URL收集的变量中转义必要的字符，以避免XSS。

我已经使用JSFIDLE创建了一个示例。页面通过URL变量接受图像的URL，纯粹出于测试目的-您自己的实现不应包括此内容（在此页面上）。还请注意，我自然没有包括XSS保护或

null检查。

是指向页面的链接，使用1920 x 1080的目标图像。

是指向页面的链接，使用800 x 600的目标图像。

请记住，要查看图像的真实重新加载，您需要清除浏览器的缓存，以便再次加载图像。

您可以查看上面页面的源代码。如果您希望调整此演示，我建议您将其保存到本地文档中，因为jsFiddle的帧可能会中断位置计算。

上面的页面提供了创建包含我创建的第二个页面的弹出窗口的方法。它通过URL将图像位置传递到第二个页面。如前所述，我建议您在第二页上确保给定的图像名称不会超出您的网站（本例中故意省略了这些检查）。

是第一个页面创建弹出窗口的页面的源。

如果您需要进一步的说明或示例，请告诉我。
如果显示了包含
加载.gif
的弹出窗口，那么浏览器可能不喜欢您使用单击打开两个弹出窗口。

您可以尝试打开一个弹出窗口，以显示正在加载的图像，而c