Javascript 仅在加载活动类映像时启动函数-Twitter引导转盘

我正在使用Twitter引导旋转木马，每张幻灯片中都有一个图像+音频文件，分别使用HTML img和音频标签

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

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

我所尝试的：document.ready（）已被使用。我不想在加载之前使用window.load，否则用户可能需要等待所有幻灯片（可能超过50个）加载。如果我尝试使用$（“.active img”）.load（function（）{}）；这根本不起作用。我也尝试过用$（“img”）替换$（“.activeimg”），结果相同

所需内容：仅在加载类为“active”的图像（和音频）后播放音频的功能

这是密码

一些有用的信息-保存转盘图像的div的id=#转盘示例通用；幻灯片转换完成后，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（）{}和$（“.activeimg”）.on（“load”，function（）{}）。它们似乎都没有等待映像实际加载

---

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

如果将class.active应用于img的祖先标记，则您的第一次尝试是好的。如果class.active应用于img标记本身，则您应该尝试：$（“img.active”）.load（） $("img.active").load() 或者只是

$（“.active”）.load（） 在第二种情况下，必须确保没有其他标记具有此类

但是，我建议您预加载前3/4个图像，并使用已经可用的图像开始幻灯片放映；然后，当用户正在欣赏第一个幻灯片图像时，通过AJAX加载其余图像。

您可以尝试通过.bind jQuery函数将加载事件绑定到新插入的图像。加载事件可能没有绑定到e在页面首次加载后插入的元素。 $(".active").load()