preLOAD音频文件/事件？ [英] Preload Audio Files / Event?

问题描述

我是preloading我所有的资产之前，我开始一个基于JS的应用程序这样做的：

I am preloading all my assets before I start a JS-based application doing:

assets = [....]; // files
$.each(assets,function(){
    var r = /\.([^\.]+)$/;
    var ext = r.exec(this); //get file type
    if (ext[1] == 'png'){
        var tmp = new Image();
    } else if (ext[1] == 'mp3'){
        var tmp = new Audio();
    }

    tmp.src = this;
    tmp.onload = function(){
        var i = assets.indexOf(this);
        assets.splice(i,1);
        if (!assets.length){
            console.log('all loaded');
            app.build();
        }
    }
});

这工作得很好，当我刚 png格式在我的阵列，但是当我添加音频（MP3音乐）的DOM元素被创建，但它永远不会触发一个的onload 这样的应用程序永远不会启动。我尝试添加一个 tmp.load（）已，但它并没有任何区别 - 我也真的无法找到网络上的任何COM prehensive信息。就是这种做法甚至可能吗？难道一个音频（）甚至触发一个适当的事件？谢谢！

This works fine when I have just pngs in my Array, yet when I add audio (mp3s) the DOM element gets created, yet it never fires an onload so the app never starts. I tried adding a tmp.load() already but it didn't make any difference - also I couldn't really find any comprehensive information on the web. Is this approach even possible? Does an Audio() even fire an appropriate event? Thanks!

推荐答案

您正在寻找媒体的事件，它说你可以使用如 loadeddata 。

You're looking for media events, which says you could use e.g. loadeddata.

我想解决一些其他点：

• 一个正则表达式字符组中的字符不需要转义。


• 为什么不创建的元素和有约束力的事件处理程序使用jQuery？

我改变了你的code一点点：

I altered your code a little bit:

$.each(assets, function() {
    var r = /\.([^.]+)$/,
        ext = r.exec(this), //get file type
        tmp = ext[1] === 'png'
                ? $("<img>")
                : $("<audio>"),
        eventName = ext[1] === 'png'
                    ? 'load'
                    : 'loadeddata';

    tmp
      .on(eventName, function() {
          var i = assets.indexOf(this);
          assets.splice(i, 1);

          if (!assets.length){
              console.log('all loaded');
              app.build();
          }
      })
      .attr("src", this); // only set after adding the load callback
                          // to avoid a possible race condition
});

这篇关于preLOAD音频文件/事件？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！