Question

我有一个Bootstrap carousel和一个不可见的div，它具有要在加载大图像时显示的gif加载项。我只想在轮播上更改活动图像并且该图像仍在加载时显示此div。我已经可以使用HTML和CSS，我只需要jQuery的帮助。

我从Imgur获取图像链接，然后使用jQuery构建所需的 carousel-items 并将它们附加在carousel容器上。然后，我在轮播事件slide.bs.carousel上附加了一个向我展示加载程序的函数。这可行

BUT BUT BUT

我担心即使图像已经加载/缓存，加载器也会显示几毫秒。我该如何预防？我怎么知道正在激活的图像是否已经加载？我真的需要为此担心吗，还是就这样离开它？）。

然后，我想在活动映像准备好后隐藏加载程序，而我做到了：

$('.carousel-item img').each(function(){
    $(this).on('load', function(){
    $("#loader_container").css("visibility","hidden");
  });
});

但这不起作用。似乎这种负载甚至持续点火直到整个旋转木马的所有图像都已加载，并且以某种方式装载机没有隐藏到最后，这就是问题n.2。

我可能正在解决这个错误。问题n.1真的有问题吗？我该如何解决问题2？谢谢！

编辑1：

我尝试执行此操作，但仍然无法正常工作。当我滑动到下一张幻灯片时，我看到图像已被加载，然后加载器出现并且不再消失。

     $(".carousel-item img").each(function(index){
        $(this).on('slid.bs.carousel', function(){
          $("#loader_container").css("visibility","visible");
        });
        $(this).on('load', function(){
          $("#loader_container").css("visibility","hidden");
        });
        $(this).attr("src",links[index]);
      });

编辑2：

此外，似乎浏览器尝试尽快加载所有图像，即使那些未显示/不是活动项目的图像。我只想在用户转到该幻灯片并激活该项目时才加载图像。

编辑3：

我找到了一个库名称jquery.unveil.js，它看起来完全符合我的需要，并且非常易于使用...但是以某种方式不起作用。也许AngularJS可以帮助我吗？有人知道如何修改我的代码以使用angular做到这一点吗？喜欢使用ngui-in-view吗？

Answer 1

$('.carousel-item img').each(function(){
    $(this).on('slid.bs.carousel', function(){
      $("#loader_container").css("display","none");
    });
  });

您可以改用slide.bs.carousel和slid.bs.carousel

Answer 2

通过惰性加载程序解决，代码如下：

$(".carousel.lazy").on("slide.bs.carousel", function(ev) {
var lazy;
lazy = $(ev.relatedTarget).find("img[data-src]");
if(lazy.length > 0){

  $("#loader_container").css("visibility","visible");
  $(".carousel-item img").on("load",function(){
    $("#loader_container").css("visibility","hidden");
  });

  lazy.attr("src", lazy.data('src'));
  lazy.removeAttr("data-src");
}});

我需要if(lazy.length > 0)，因为一旦我完成了轮播的完整轮次并加载了所有图像，加载器就会以某种方式出现并且永远不会消失。我尝试使用if(img.complete)，但没有用，所以我使用了该技术。

引导轮播-加载活动图片时加载动画

2 个答案: