如何对fancybox图片应用延迟加载？
[英]How to apply lazy load for fancybox images?
问题描述
I am running a gallery using fancybox on page load. 
我正在页面加载时使用fancybox运行画廊。 I am trying to apply lazyload using jquery lazyload for the images in the fancybox. 我正在尝试使用fancybox中的图像的jquery lazyload应用lazyload。
But somehow its not working. 但是不知何故，它不起作用。 I changed the jquery.fancybox.js from. 我从更改了jquery.fancybox.js。
image : '<img class="fancybox-image" src="{href}" alt="" />',
to 至
image : '<img class="fancybox-image lazy" data-src="{href}" src="" alt="" />',
So the resulted html will be like the following. 因此，生成的html将如下所示。
<img class="fancy-image lazy" data-src="file.jpg" src alt/>
I am applying the lazy load like below. 我正在像下面这样施加延迟负载。
<script>
$(document).ready(function(){
$("img").lazy();
});
</script>
and also i tried delay. 而且我尝试延迟。
<script>
$(document).ready(function(){
$("img").lazy({
delay: 5000
});
});
</script>
I have also searched through google but i cant able to find anything related to this. 我也通过谷歌搜索，但我找不到任何与此相关的信息。 Please help me. 请帮我。
2 个解决方案
解决方案1
1 2014-08-12 18:24:46
Respecting to your comments my Solution is : 尊重您的意见，我的解决方案是：
$(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. Summary 1.总结
Use this construction: 使用此构造：
<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}}— it must be same forhrefandaltattributes, if you use same image for thumbnail{{Link to your image}}–如果href和alt属性使用相同的缩略图，则必须相同
2. Demonstration 2.示范
- Repl.it sources : 来源 ：
<!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. Disclaimer 3.免责声明
This is solution for: 这是解决方案：
- JQuery 3.3.1 jQuery的3.3.1
- JQuery Lazy 1.7.10 JQuery Lazy 1.7.10
- FancyBox 3.5.6 FancyBox 3.5.6
In the future versions my answer may not work. 在将来的版本中，我的答案可能不起作用。
4. Syntactic sugar 4.语法糖
If you have same images as thumbnails, you can use this script , modified for FancyBox 3. You can remove a wrapper around img . 如果您具有与缩略图相同的图像，则可以使用针对FancyBox 3修改的此脚本 。您可以删除img周围a包装器。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.