Bootstrap carousel - 加载活动图像时加载动画答案

【问题标题】：Bootstrap carousel - loading animation when active image is loadingBootstrap carousel - 加载活动图像时加载动画
【发布时间】：2019-03-24 09:15:42
【问题描述】：

我有一个Bootstrap carousel 和一个带有加载 gif 的不可见 div，我想在加载大图像时显示它。我只想在我更改轮播上的活动图像并且此图像仍在加载时才显示此 div。我已经让 HTML 和 CSS 工作了，我只需要jQuery 的帮助。

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

但是但是但是

我担心即使图像已经加载/缓存，加载程序也会显示几毫秒。我怎样才能防止这种情况？我如何知道正在变为活动状态的图像是否已加载？我真的需要担心这个还是我就这样放着不管？）。

然后我想在活动图像准备好时隐藏加载器，我已经这样做了：

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

但它不起作用。似乎这个负载甚至一直在发射直到整个轮播的所有图像都已加载，并且不知何故加载器最终没有隐藏，这是问题 n.2。

可能我正在接近这个错误。问题 n.1 真的有问题吗？我该如何解决问题 n.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可以帮助我？任何人都知道如何修改我的代码以使用角度来做到这一点？喜欢用ngui-in-view？

【问题讨论】：

尝试使用fadeIn()和fadeOut()
这可能是问题 n.1 的解决方案

标签： javascript jquery twitter-bootstrap

【解决方案1】：

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

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

【讨论】：

【解决方案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)，但它不起作用，所以我使用了该技术。

【讨论】：