javascript - 如何对 fancybox 图像应用延迟加载？

Question

我在页面加载时使用 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>

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

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