解决Hexo NexT中Fancybox与Lazyload冲突的问题
环境
- Hexo v4.2.0
- NexT v7.7.0
- Fancybox v3.5.7
- Hexo-Lazyload-image v1.0.5
问题产生的原因
这篇文章解释地非常清楚了。
因为图片懒加载预先会使用占位图来替代图片的src，等图片加载完成后，再用data-original里面的内容替换src里面的内容。然而 fancybox 的原理是在页面加载时给页面中所有的图片套一层a标签，a标签的href就是 fancybox 在页面加载时获取的图片src，恰好这时候获取的src偏偏就是 lazyload 的占位图的 url。
解决办法
在上面提及的博客中，作者提出了一种使用js脚本，在图片完成加载后，对a标签中的href进行修正的方法。但是，我觉得这种方法不利于之后的升级维护，所以没有采用。
这里，我使用了另一种方法来解决了冲突的问题：更换Lazyload的实现方式。
NexT主题集成了使用lozad.js来实现Lazyload懒加载。使用这个方法则不会与Fancybox产生冲突。具体配置方法，详见在NexT中启用Lazyload。lozad.js使用img标签的data-src属性来保存目标图片的路径。在Lazyload加载前，img标签中并不包含src属性，而Fancybox也能正确从data-src中获取到图片的正确路径。
缺点
前面说了，使用这种方法可以实现Lazyload的功能，但该NexT中集成lozad.js没有提供设置占位图片的选项。所以，如果你一定希望有占位图片，那么这种方法可能并不能满足你的需求。
不过，我有一个想法，如果把Hexo-Lazyload-image插件中的data-original属性改成data-src属性，那么能不能实现与Fancybox的兼容呢？我暂时没有进行尝试，只是一个猜想而已。之后有机会的话会尝试一下，再来更新。