解决Fancybox与Lazyload冲突的问题

图片懒加载与fancybox冲突，导致点开后图片显示错误。
原因与解决办法如下：

原因

  因为图片懒加载预先会使用占位图来替代图片的src，等图片加载完成后，再用data-original里面的内容替换src里面的内容。然而fancybox的原理是在页面加载时给页面中所有的图片套一层a标签，a标签的href就是fancybox在页面加载时获取的图片src，恰好这时候获取的src偏偏就是lazyload的占位图的url，因此针对这个问题的解决办法有两种，一种是修改fancybox的代码（因为有些人引入的是外部js，所以不推荐。），我们来看另一种解决办法。

解决办法

  思路： 在图片加载完成后，找到所以图片上一级的a标签，修改他的href属性。
代码如下：

<script type="text/javascript">
  var img = $('img');                        //获取所有的img标签
  img.onload = function() {                  //设置其完成后加载的方法
    $(document).find('img[data-original]').each(function() {
      $(this).parents('a[class="fancybox fancybox.image"]').attr("href", $(this).attr("data-original"));
    });                                      //获取img[data-original]的值，然后找到img上级的a标签，将值赋给其href属性
  }
  //2019年4月测试此BUG已修复
</script>

注意：以上代码使用了jQuery，如果之前没有引用jQuery的话，记得在代码前引入。