仅在加载活动类图像时启动功能 - Twitter Bootstrap Carousel

Question

我在每张幻灯片中使用带有图像 + 音频文件的 Twitter Bootstrap Carousel，分别使用 HTML img 和 audio 标签。

功能 1 停止播放音频文件，以防用户中途更改幻灯片。功能 2 播放音频文件（如果存在）。功能 3 确保在没有用户交互的情况下，幻灯片在音频结束后自动更改。

问题：在低带宽连接上，音频有时甚至在完整图像加载之前就开始播放。

我尝试过的： document.ready() 已被使用。我不想在之前使用 window.load ，否则用户可能必须等待所有幻灯片（可能超过 50 个）加载。如果我尝试使用 $(".active img").load( function() { });它根本不起作用。我也尝试用 $("img") 替换 $(".active img") - 结果相同。

需要什么：只有在加载了“活动”类的图像（和音频）后才播放音频的函数。

这是代码。

一些有用的信息 - 保存轮播图像的 div 的 id = #carousel-example-generic; on('slide.bs.carousel') 函数在幻灯片转换完成时运行；播放/暂停等是 HTML 给出的默认方法

     $(document).ready(function(){    
        // Stop audio if slide changes
        $(function(){
                $('#carousel-example-generic').on('slide.bs.carousel', function () {
                    if($(".active audio").length) {
                        $(".active audio")[0].pause();
                        $(".active audio")[0].currentTime = 0;}
                });
            });

         $(function(
         $('#carousel-example-generic').on('slid.bs.carousel', function () {
         if($(".active audio").length){
            $(".active audio")[0].play();
            }
            else{
            //if no audio move to next slide.
            setTimeout(function() {$('#carousel-example-generic').carousel('next');},500);
            console.log("No Audio");}
          });
        });


        //As the audio ends --> move to next slide with some delay.

        $("audio").bind("ended", function(){ 
        setTimeout(function(){
              $('#carousel-example-generic').carousel('next');}, 200);
              console.log("Audio ended");
    });
    }

更新：即使在成功实现 .load 功能之后，音频也会在图像加载之前开始。我尝试使用 .load(function(){} 和 $(".active img").on("load", function(){})。它们似乎都没有等待图像实际加载。

我目前正在使用 document.readyState 但这有一个问题 - 它会等待所有图像加载后再继续。还有其他建议吗？

Answer 1

如果将 .active 类应用于 img 的祖先标签，那么您的第一次尝试是好的。如果 .active 类用于 img 标签本身，您应该尝试：

$("img.active").load()

要不就

$(".active").load()

在第二种情况下，您必须确保没有其他标签具有此类。

不过，我建议您预先加载前 3/4 的图像，并使用已有的图像开始幻灯片放映；然后，当用户欣赏第一张幻灯片图像时，通过 AJAX 加载剩余的图像。