被fancybox坑的心路历程

小程序：扫一扫查出行
【扫一扫了解最新限行尾号】
复制小程序

今天项目中需要使用fancybox来展示图片，但是使用中发现fancybox没起作用，点击图片直接刷新了页面！

fancybox的原理是通过给a标签绑定事件，使得a标签不在是直接跳转链接，而是把链接中的图片请求到一个js容器当中。

fancybox需要初始化，类似如下

 $('.fancybox').fancybox({

     'autoSize' : true,

     'autoHeight' : true,

     'autoWidth' : true,

     'autoResize' : true,

     'autoCenter' : true,

     'scrolling' : 'no',

     'arrows' : true,

     'closeBtn' : true,

     'mouseWheel' : false,

     'modal' : false,

     'loop' : false,

     'playSpeed' : 500,

     'helpers' : {

         'title' : {'type' : 'float'},

         'buttons' : {},

         'overlay' : {'closeClick' : false}

     },

     'afterLoad' : function() {

         this.title = 'Image ' + (this.index + 1) + ' of '

             + this.group.length + (this.title ? ' - ' + this.title : '');

     }

 });

尝试将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了。

 function initFancybox() {

     setTimeout(function() {

         console.log($(".fancybox").length);

         $('.fancybox').fancybox({

             'autoSize' : true,

             'autoHeight' : true,

             'autoWidth' : true,

             'autoResize' : true,

             'autoCenter' : true,

             'scrolling' : 'no',

             'arrows' : true,

             'closeBtn' : true,

             'mouseWheel' : false,

             'modal' : false,

             'loop' : false,

             'playSpeed' : 500,

             'helpers' : {

                 'title' : {'type' : 'float'},

                 'buttons' : {},

                 'overlay' : {'closeClick' : false}

             },

             'afterLoad' : function() {

                 this.title = 'Image ' + (this.index + 1) + ' of '

                     + this.group.length + (this.title ? ' - ' + this.title : '');

             }

         });

     }, 500);

 }