仅在加载活动类图像时启动功能 - Twitter 引导轮播

Start function only when active class image is loaded - Twitter Bootstrap Carousel

本文关键字：Twitter 功能 启动 加载 活动 图像      更新时间：2023-09-26

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

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

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

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

需要什么：仅在加载了类"active"的图像（和音频）后播放音频的函数。

这是代码。

一些有用的信息 - 保存轮播图像的div 的 id = #carousel-example-generalric; 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，但这有一个问题 - 它会等待所有图像加载后再继续。还有其他建议吗？

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

$（"img.active"）.load（）
或者只是 
$（".active"）.load（）

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

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

相关文章：