0%

解决Fancybox与Lazyload冲突的问题

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

原因

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

解决办法

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

1
2
3
4
5
6
7
8
<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属性
}
</script>

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

bulb