如何对fancybox图片应用延迟加载？
[英]How to apply lazy load for fancybox images?
问题描述
我正在页面加载时使用fancybox运行画廊。 我正在尝试使用fancybox中的图像的jquery lazyload应用lazyload。
但是不知何故，它不起作用。 我从更改了jquery.fancybox.js。
image : '<img class="fancybox-image" src="{href}" alt="" />',
至
image : '<img class="fancybox-image lazy" data-src="{href}" src="" alt="" />',
因此，生成的html将如下所示。
<img class="fancy-image lazy" data-src="file.jpg" src alt/>
我正在像下面这样施加延迟负载。
<script>
$(document).ready(function(){
$("img").lazy();
});
</script>
而且我尝试延迟。
<script>
$(document).ready(function(){
$("img").lazy({
delay: 5000
});
});
</script>
我也通过谷歌搜索，但我找不到任何与此相关的信息。 请帮我。
2 个解决方案
解决方案1
1 2014-08-12 18:24:46
尊重您的意见，我的解决方案是：
$(function() {
$("img").lazyload();
});
$('.nav_wrap_start').delay(300).animate({top:'0px'},1500).queue(function(next) { $(this).attr('class','nav_wrap'); next(); });
$('.welcome_wrap').delay(2100).fadeIn(500);
$('.nav_wrapleft').delay(300).fadeIn(700);
// fancybox settings
$("a.fancyboxnumber").fancybox({
'titlePosition' : 'outside',
'overlayColor' : '#000',
'overlayOpacity' : 0.9
});
解决方案2
-1 2019-01-30 16:43:06
1.总结
使用此构造：
<a data-fancybox="gallery" href="{{Link to your image}}"><img class="KiraNotLazy" data-src="{{Link to your image}}" alt="{{Your image description}}"></a>
-
{{Link to your image}}–如果href和alt属性使用相同的缩略图，则必须相同
2.示范
- 来源 ：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JQuery Lazy + FancyBox</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" defer></script>
<script src="https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@3.5.6/dist/jquery.fancybox.min.js" defer></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-lazy@1.7.10/jquery.lazy.min.js" defer></script>
<script src="KiraScript.js" defer></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fancyapps/fancybox/dist/jquery.fancybox.min.css" />
<link rel="stylesheet" href="KiraStyle.css" />
</head>
<body>
<a data-fancybox="gallery" href="https://i.imgur.com/15Nghv2.jpg"><img class="KiraNotLazy" data-src="https://i.imgur.com/15Nghv2.jpg" alt="Kira in winter 1"></a>
<a data-fancybox="gallery" href="https://i.imgur.com/5Iotirp.jpg"><img class="KiraNotLazy" data-src="https://i.imgur.com/5Iotirp.jpg" alt="Kira in winter 2"></a>
<a data-fancybox="gallery" href="https://i.imgur.com/d6mDu6F.jpg"><img class="KiraNotLazy" data-src="https://i.imgur.com/d6mDu6F.jpg" alt="Kira in winter 3"></a>
<a data-fancybox="gallery" href="https://i.imgur.com/fh3wGvs.jpg"><img class="KiraNotLazy" data-src="https://i.imgur.com/fh3wGvs.jpg" alt="Kira in winter 4"></a>
</body>
</html>
body {
background-color: aliceblue
}
img {
display: block;
margin: 0 0 100rem;
max-width: 100%
}
// [INFO] JQuery Lazy basic usage:
// http://jquery.eisbehr.de/lazy/
$(function() {
$('.KiraNotLazy').Lazy();
});
// [INFO] FancyBox3 options:
// https://fancyapps.com/fancybox/3/docs/#options
$('[data-fancybox="gallery"]').fancybox({
buttons: [
"zoom",
"share",
"slideShow",
"fullScreen",
"download",
"thumbs",
"close"
],
});
3.免责声明
这是解决方案：
- jQuery的3.3.1
- JQuery Lazy 1.7.10
- FancyBox 3.5.6
在将来的版本中，我的答案可能不起作用。
4.语法糖
如果您具有与缩略图相同的图像，则可以使用针对FancyBox 3修改的此脚本 。您可以删除img周围a包装器。
如何延迟加载图像？
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.