Question

我制作了一个可以正常工作的自定义音频/视频管理器。问题是我没有预料到这个人会添加尽可能多的条目，现在它很慢。在页面加载约15-20秒之后，音频不会立即播放，之后一切正常。

我通过php查询数据库，然后是这个jQuery：

<?php
  foreach($results as $row) {
?>
    var audioElement<?=$row[0]?> = document.createElement('audio');
    audioElement<?=$row[0]?>.setAttribute('class', 'div-<?=$row[0]?>');
    audioElement<?=$row[0]?>.setAttribute('src', '<?=$row[4]?>');
    $.get();
    audioElement<?=$row[0]?>.addEventListener('load', function() {
        pause(playing);
        play(<?=$row[0]?>);
    }, true);
    $('.play<?=$row[0]?>').click(function() {
        if (playing==<?=$row[0]?>) {
            pause(<?=$row[0]?>);
        } else {
            pause(playing);
            play(<?=$row[0]?>);
        }
    });
<?php

}

$row[0]是数据库中的ID，$row[4]是音频文件的路径。我试着像这样修改它：

    <?php
      foreach($results as $row) {
    ?>
        var audioElement<?=$row[0]?> = document.createElement('audio');
        audioElement<?=$row[0]?>.setAttribute('class', 'div-<?=$row[0]?>');

    // added the line below
    $('.play<?=$row[0]?>').click(function(){

        audioElement<?=$row[0]?>.setAttribute('src', '<?=$row[4]?>');

    // also added
    });
        $.get();
        audioElement<?=$row[0]?>.addEventListener('load', function() {
            pause(playing);
            play(<?=$row[0]?>);
        }, true);
        $('.play<?=$row[0]?>').click(function() {
            if (playing==<?=$row[0]?>) {
                pause(<?=$row[0]?>);
            } else {
                pause(playing);
                play(<?=$row[0]?>);
            }
        });
    <?php
  }

我希望只在点击相应的链接后才加载音频文件，但是，第一次点击时仍然有延迟时间。我在webpagetest.org运行测试，编辑后页面速度大大提高，并且显示它没有加载音频。所以我不确定为什么它在初始点击上播放需要这么长时间。

问题页面：Video/Music Gallery

有什么想法吗？

仅在单击链接时加载音频文件

0 个答案: