如何对fancybox图像应用延迟加载？答案

【问题标题】：How to apply lazy load for fancybox images?如何对fancybox图像应用延迟加载？
【发布时间】：2014-10-05 11:55:09
【问题描述】：

我在页面加载时使用 fancybox 运行画廊。我正在尝试使用 jquery lazyload 为 fancybox 中的图像应用延迟加载。

但不知何故它不起作用。我改变了 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>

我也通过谷歌搜索，但我无法找到与此相关的任何内容。请帮帮我。

【问题讨论】：

您在页面加载时遇到任何错误吗？请解释你的问题。
你好@Farshad，我没有收到任何错误。我正在尝试将lazyload 应用于fancybox 中显示的图像。我正在加载fancybox，同时使用触发fancybox 打开页面本身。我在队列中有很多图像。因此，在加载页面时，它将加载整个图像。所以加载所有图像需要太多时间。实际上，每当我加载页面时，只有画廊中的第一张图片应该加载。在fancybox的缩略图中需要显示图库中的所有图像。我正在尝试使用延迟加载，并且此过程是否有任何替代方法。谢谢。
我觉得这个链接对你有用link
你好@Farshad，我检查了链接。图片点击后，fancybox 正在加载。页面加载后我没有加载fancybox。当我打开一个页面时，我正在加载fancybox。每当我在fancybox中加载特定页面时，我都需要通过仅加载第一张图像和所有缩略图来减少加载页面的时间。
如果您愿意，可以将您的尝试（代码）放入 jsfiddle 中。我去看看。

标签： javascript jquery fancybox lazy-loading

【解决方案1】：

尊重您的 cmets，我的解决方案是：

Source Code

Demo

 $(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。总结

使用这个结构：

<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。示范

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"
    ],
});

Repl.it demo:

3。免责声明

这是解决方案：

jQuery 3.3.1
JQuery Lazy 1.7.10
FancyBox 3.5.6

在未来的版本中，我的答案可能不起作用。

4。语法糖

如果您有与缩略图相同的图像，则可以使用为 FancyBox 3 修改的 this script。您可以删除 a 围绕 img 的包装。

【讨论】：

请评论您的反对意见。让我知道这个答案有什么问题，以便我们可以使这个网站变得更好。谢谢。