Question

我在页面加载时使用fancybox运行一个库。我正在尝试使用jquery lazyload对fancybox中的图像应用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>

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

Answer 1

尊重您的意见我的解决方案是：

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

Answer 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：

KiraJQueryLazyFancyBox--ezgif_minified

3。免责声明

这是以下解决方案：

jQuery 3.3.1
JQuery Lazy 1.7.10
FancyBox 3.5.6

在将来的版本中，我的答案可能无效。

4。语法糖

如果与缩略图具有相同的图像，则可以使用针对FancyBox 3进行了修改的this script。可以删除a周围的img包装。

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

2 个答案:

1。摘要

2。示范

3。免责声明

4。语法糖