被fancybox坑的心路历程

　　今天项目中需要使用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 }