Javascript 如何为fancybox图像应用延迟加载？

我正在运行一个在页面加载时使用fancybox的图库。我正在尝试将lazyload用于fancybox中的图像

但不知怎么的，它不起作用。我将jquery.fancybox.js从更改为

image    : '<img class="fancybox-image" src="{href}" alt="" />',

图像：“”，

到

图像：“”，

因此，生成的html如下所示

<img class="fancy-image lazy" data-src="file.jpg" src alt/>

我正在应用如下所示的惰性负载

<script>
$(document).ready(function(){
   $("img").lazy();
});
</script>

$（文档）.ready（函数（）{
$（“img”）.lazy（）；
});

我也试着推迟

<script>
$(document).ready(function(){
   $("img").lazy({
    delay: 5000
   });
});
</script>

$（文档）.ready（函数（）{
$（“img”）.lazy({
延误：5000
});
});

---

我也在谷歌上搜索过，但我找不到任何与此相关的东西。请帮助我。

关于您的意见，我的解决方案是：

1.总结 使用此结构：

• {{Link to your image}}

  -如果对缩略图使用相同的图像，则

  href

  和

  alt

  属性必须相同

---

2.集会示威

• :

jquerylazy+FancyBox

正文{
背景色：aliceblue
}
img{
显示：块；
保证金：0 100雷姆；
最大宽度：100%
}

/[INFO]JQuery惰性基本用法：
// http://jquery.eisbehr.de/lazy/
$（函数（）{
$（'.KiraNotLazy'）.Lazy（）；
});
//[信息]FancyBox3选项：
// https://fancyapps.com/fancybox/3/docs/#options
$（'[data fancybox=“gallery”]'）。fancybox({
按钮：[
“缩放”，
“分享”，
“幻灯片放映”，
“全屏”，
“下载”，
“拇指”，
“结束”
],
});

• :

---

3.免责声明 此解决方案适用于：

• JQuery 3.3.1
• jquery1.7.10
• FancyBox 3.5.6

在未来的版本中，我的答案可能行不通

---

4.语法糖 如果您有与缩略图相同的图像，则可以使用，为FancyBox 3修改。您可以删除

img

周围的

a

包装

---

加载页面时，您是否遇到fire bug错误？请解释你的问题。你好@Farshad，我没有收到任何错误。我正在尝试将lazyload应用于fancybox中显示的图像。我正在加载fancybox，同时使用触发fancybox打开页面本身。我有很多照片在排队。因此，在加载页面时，它将加载整个图像。因此，加载所有图像需要花费太多的时间。实际上，每当我加载页面时，只应加载库中的第一个图像。在fancybox的缩略图中，需要显示库中的所有图像。我正在用lazyload尝试这个过程，是否有其他方法可以替代这个过程。谢谢。我认为这个链接对你很有用。你好@Farshad，我检查了这个链接。图像单击后，fancybox正在加载。页面加载后，我不会加载fancybox。当我打开一页时，我正在直接加载fancybox。每当我在fancybox中加载特定页面时，我需要通过只加载第一个图像和所有缩略图来减少加载页面所需的时间。如果需要，请将try（代码）放在JSFIDLE中。我查一查。请评论你的否决票。让我知道这个答案有什么问题，这样我们可以使这个网站更好。谢谢

<script>
$(document).ready(function(){
   $("img").lazy({
    delay: 5000
   });
});
</script>

 $(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
    });