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（）{}）。它们似乎都没有等待图像实际加载。 / p>

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

Answer 1

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

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

或者只是

$(".active").load()

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

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

仅在加载活动类映像时启动函数 - Twitter Bootstrap Carousel

1 个答案: