fancybox图片查看、lazyload懒加载踩坑日记

今天花了许久时间来折腾博客。一直都想要实现懒加载,但是总有着一些莫名的错误。无奈的,我只能一个个排查问题。最后发现我的 css 文件存在问题,使得图片只可被加载少部分。

八千多行的全局 css 文件,肯定是不能说去就去的。我便只能开始苦逼的探索之旅了。理科生的思维,二分法查找,幸好让我在少许时间内锁定到了几百行内的代码问题。

最终惊人的发现竟然是 div 的 height 设置了 100%影响的,真的心态很崩。

我便改成 height: auto;为自适应了。但是与此而来,因为 height 的影响,浏览器的滚动条又新增了一个。

我便又只能想办法了,最终通过:

1
2
3
body::-webkit-scrollbar {
display: none;
}

懒加载 lazyload

这个解决后就言归正传,谈谈懒加载 lazyload 的使用:

  1. 引入 js
1
2
3
4
<script type="text/javascript" src="https://cdn.staticfile.org/jquery/1.7.2/jquery.min.js"></script>

<script src="https://cdn.jsdelivr.net/gh/onecoderly/cdn/static/js/jquery.scrollstop.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/onecoderly/cdn/static/js/jquery.lazyload.min.js"></script>

我开始使用 jquery2.几版本的,但是就报错了,似乎他们不兼容,我便只能降低版本了。

  1. 图片格式
1
<img class="lazyload" data-original="真实图片的地址" src="加载的gif图" />
  1. 使用懒加载
1
2
3
4
5
6
$(function () {
$("img.lazyload").lazyload({
effect: "fadeIn",
event: "scrollstop", // 滚动加载图片,适合大量图片
});
});

fancybox 图片查看

  1. 引入文件
1
2
3
4
<script type="text/javascript" src="https://cdn.staticfile.org/jquery/1.7.2/jquery.min.js"></script>

<link rel="stylesheet" href="https://cdn.staticfile.org/fancybox/3.5.2/jquery.fancybox.min.css" />
<script src="https://cdn.staticfile.org/fancybox/3.5.2/jquery.fancybox.min.js"></script>
  1. 图片格式
    配合懒加载一起使用
    1
    2
    3
    4
    <a data-fancybox="gallery" data-caption="图片标题" href="查看图片的地址">
    <img class="lazyload" data-original="查看图片的地址"
    src="https://cdn.jsdelivr.net/gh/onecoderly/cdn/static/images/loading.gif"/>
    </a>

加载图片查看所需的js配置

1
2
3
4
5
6
7
8
$("[data-fancybox]").fancybox({
thumbs: {
autoStart: true, //缩略图
},
});
$("[data-fancybox]").fancybox({
protect: true, // 给图片添加水印
});
  1. 视频格式
    1
    2
    3
    <a data-fancybox class="innerlinksa" href="视频地址" title="大B站" target="_blank"
    rel="external nofollow">谨以此片,告诫自己!❤
    </a>

加载视频播放所需的js配置

1
2
3
4
5
6
7
8
9
$('[data-fancybox]').fancybox({
youtube : {
controls : 0,
showinfo : 0
},
vimeo : {
color : 'f00'
}
});
打赏
  • 版权声明: 本博客所有文章除特别声明外,均采用 Apache License 2.0 许可协议。转载请注明出处!
  1. © 2020 Liu Yang    湘ICP备20003709号

请我喝杯咖啡吧~

支付宝
微信