将AJAX调用添加到函数触发的弹出窗口阻止程序

时间:2010-06-06 16:36:52

标签: javascript jquery ajax popup

我有一个客户想要在居中的弹出窗口中打开各种大小的图像。我试图让他们使用FancyBox,但他们不想要插页式演示,所以......

我最初是打开一个通用弹出窗口,根据图像大小调整大小和居中onload但是他们不喜欢移位所以我添加了一个PHP脚本来回显大小并使用jQuery来获取大小信息以提供给pop打电话。

但似乎这导致的延迟是引发所有弹出窗口拦截器。

这是JS

$("#portfolioBigPic").click(function () {
      var src = $("#portfolioBigPic").attr('src');
      var ar = src.split('/');
      var fname = ar.pop();
      fname = '/g/portfolio/clients/big/' + fname;

      $.get("imgsize.php", { i: fname}, function(data){
      var dim = data.split(",");
      popit(fname,dim[0],dim[1]);
  });
});

function popit(img,w,h) {
  var features = 'width='+w+',height='+h+', toolbar=0, location=0, directories=0, status=0, menubar=0, scrollbars=0, resizable=1,';
  var left = (screen.width/2)-(w/2);
  var top = 0;
  features += 'top='+top+',left='+left;
  bigpic = window.open('portfolioBigPic.php?img='+img, 'bigpic',features);
  bigpic.focus();
}

躲避阻挡者和失败之间的唯一区别是我添加了AJAX .get并使用它来指定w和h。

有关如何避免这种情况的任何想法?也许我应该使用PHP来获取所有大图片的宽度和高度,并在此页面加载时编写它们的JS数组?我是对的,因为获取数据导致的延迟会使阻塞者绊倒吗?

思考?任何建议都非常感激。

JG

//编辑 - 添加我的分辨率 Per Spiky的回答我需要将popit()调用移出AJAX调用的成功处理程序,以便在用户的单击事件的上下文中发生调用。

所以我意识到当点击我的小拇指来设置大图像(#portfolioBigPic)的预览时,我可以在那时查找完整大小的图片。所以我将AJAX大小调整到了拇指的click()。

某人HTH。

1 个答案:

答案 0 :(得分:5)

这不是导致问题的延迟本身,而是你试图从脚本执行上下文打开窗口,而不是“点击”处理程序。具体来说,在这种情况下,它是AJAX成功处理程序(或其他)。

你不能解决这个限制,所以是的,你应该首先将你的图像大小转储到主页面,以便处理“点击”的脚本可以知道大小。