今天项目中需要使用fancybox来展示图片，但是使用中发现fancybox没起作用，点击图片直接刷新了页面！
fancybox的原理是通过给a标签绑定事件，使得a标签不在是直接跳转链接，而是把链接中的图片请求到一个js容器当中。
fancybox需要初始化，类似如下
1 $('.fancybox').fancybox({
2 'autoSize' : true,
3 'autoHeight' : true,
4 'autoWidth' : true,
5 'autoResize' : true,
6 'autoCenter' : true,
7 'scrolling' : 'no',
8 'arrows' : true,
9 'closeBtn' : true,
10 'mouseWheel' : false,
11 'modal' : false,
12 'loop' : false,
13 'playSpeed' : 500,
14 'helpers' : {
15 'title' : {'type' : 'float'},
16 'buttons' : {},
17 'overlay' : {'closeClick' : false}
18 },
19 'afterLoad' : function() {
20 this.title = 'Image ' + (this.index + 1) + ' of '
21 + this.group.length + (this.title ? ' - ' + this.title : '');
22 }
23 });
尝试将fancybox初始化函数在页面加载后执行，失败！
一般，我们在页面初始化时执行这个初始化操作。但是项目中的图片数据时使用异步加载的，因此在图片加载完后，新请求过来打到dom上的图片外a标签并没有被fancybox初始化，因此a标签还是默认跳转url。
尝试将fancybox初始化函数在ajax请求success最后段执行，失败！
查资料说在ajax的success默认执行上述代码，想想也是正确的，但是我的项目ajax请求得到的数据并不是一堆图片，而是一堆图片的url，当ajax的success执行完成之后，其实ajax得到的图片url才真正的开始通过img标签进行资源请求！
放到success后也不能在图片加载完后执行fancybox初始化，这可怎么办？
尝试将fancybox初始化函数在success最后的setTimeout中延时执行，失败！
无奈，只能在ajax的success最后的地方使用setTimeout，延时执行初始化fancybox的代码。结果还是跳转url了。
1 function initFancybox() {
2 setTimeout(function() {
3 console.log($(".fancybox").length);
4 $('.fancybox').fancybox({
5 'autoSize' : true,
6 'autoHeight' : true,
7 'autoWidth' : true,
8 'autoResize' : true,
9 'autoCenter' : true,
10 'scrolling' : 'no',
11 'arrows' : true,
12 'closeBtn' : true,
13 'mouseWheel' : false,
14 'modal' : false,
15 'loop' : false,
16 'playSpeed' : 500,
17 'helpers' : {
18 'title' : {'type' : 'float'},
19 'buttons' : {},
20 'overlay' : {'closeClick' : false}
21 },
22 'afterLoad' : function() {
23 this.title = 'Image ' + (this.index + 1) + ' of '
24 + this.group.length + (this.title ? ' - ' + this.title : '');
25 }
26 });
27 }, 500);
28 }
而且没有任何征兆，控制台也正常输出了8，获取到了8个.fancybox元素，说明初始化是在图片加载之后执行的，应该没有问题啊？！
调程序，不拿出点侦探破案的劲头真的写不出程序！
通过录屏抓拍，发现从点击图片外a标签到改变url跳转到图片页中间，控制台报了错！！！
咔嚓！这时什么鬼，搜索也搜不到资料。
好，跟踪代码！不就是fancybox的232行嘛！
全局搜索forbidFancybox，果然在整个fancybox的js中搜不到，好！在我的js中添加这个变量！
自己添加forbidFancybox变量
再次请求，成功！
我的天啊，fancybox查看图片框架竟然有这么个bug！未定义的变量不能使用都不知道吗？一群垃圾码农造的框架！