Question

网站的所有资产都在一系列对象中，这些对象将在用户交互后显示，就像滑块一样。

{"id":"1","icon":"icon-name-class","sound":"soud-name"},
{"id":"2","icon":"icon-2-name-class","sound":"soud-2-name"},
....
{"id":"100","icon":"icon-100-name-class","sound":"soud-100-name"}

我有大约150个小图标和大约100个需要预加载的小声音，一直在寻找并且没有找到任何与js数组预加载资产有关的内容。

我正在使用图像作为背景并从对象中获取类名。我认为所有的图像都准备就绪，因为它们来自css类，但我想我错了

.icon-class-1 { background-image: url(../img/icons/img-1.png); }

this link或者与此类似的东西可以做到这一点但是在阅读文档之后无法找到如何在资产来源位于将使用js管理的数组中时应用它。

Answer 1

您必须遍历对象数组才能加载它们。

修改

由于您有很多图像无法通过CSS加载我建议你删除所有这些{"id":"1","icon":"icon-name-class", "icon_url":"http://domain/path/file.jpg", "sound":"sound-name","sound_url":"http://domain/path/file.mp3"},并将这些网址放在你的json中：

var object_array = [ {"id":"1","icon":"icon-name-class", "icon_url":"http://domain/path/file1.jpg", "sound":"sound-name","sound_url":"http://domain/path/file1.mp3"}, {"id":"2","icon":"icon-name-class", "icon_url":"http://domain/path/file2.jpg", "sound":"sound-name","sound_url":"http://domain/path/file2.mp3"}, {"id":"3","icon":"icon-name-class", "icon_url":"http://domain/path/file3.jpg", "sound":"sound-name","sound_url":"http://domain/path/file3.mp3"} ]; // Preloading arrays var icon_url_arr = []; var sound_url_arr = []; // Load counter var loaded_counter={icon:0,sound:0}; function increment_counter(x){ loaded_counter[x]++; } // Loop through the data array for(i=0;i<object_array.length;i++){ if(typeof(object_array[i].icon_url)!="undefined"){ icon_url_arr[i] = $("<img>").attr("src",object_array[i].icon_url).on("load",function(){increment_counter("icon");}); } if(typeof(object_array[i].sound_url)!="undefined"){ var audio_element = $("<audio>").attr("id","audio_"+i); sound_url_arr[i] = $("<source>").attr("src",object_array[i].sound_url).attr("type","audio/mpeg"); audio_element.append(sound_url_arr[i]).on("loadeddata",increment_counter("sound")); $("#main").append(audio_element); } } // Interval to check load status var check_all_loaded = setInterval(function(){ console.log("Loded icons: " +loaded_counter.icon+ " Loaded sounds: " +loaded_counter.sound ); $("#icon").html((loaded_counter.icon/icon_url_arr.length)*100+"%"); $("#sound").html((loaded_counter.sound/sound_url_arr.length)*100+"%"); // Stop the interval when all loaded if( (icon_url_arr.length==loaded_counter.icon) && (sound_url_arr.length==loaded_counter.sound) ){ clearInterval(check_all_loaded); console.log("Load check Interval stopped."); // Now you can use the loaded icons and sounds cycle_data(); } },10); // cycle through data on interval function cycle_data(){ console.log("Display Interval started."); // Background var i=0; setInterval(function(){ $("#main").css("background-image","url("+icon_url_arr[i].attr("src")+")"); // Audio $(document).find("audio").get(0).pause(); $(document).find("#audio_"+i).get(0).play(); // Increment loop counter. i++; // Reset counter when the array end is reached if(i==icon_url_arr.length){ i=0; } },2000); }

为你的声音网址做同样的事情 PLUS！从长远来看，它将简化维护...如果您有一天发现网址损坏。
然后，预加载可以这样做：

audio{ display:none; }

因此不会在任何地方显示或播放...
但是浏览器会加载它。

您可能需要通过CSS隐藏音频播放器：

document.ready()

我做了CodePen demo以确保它正常工作 json中只有3个项目...
图像和声音都很小所以你不会真正注意到这个演示中的负载延迟。）

我建议你将这个脚本放在setTimeout()包装器中...... 并且在public class DownloadTask extends AsyncTask<String, Void, String> { @Override protected String doInBackground(String... urls) { StringBuilder html = new StringBuilder(); URL url; HttpURLConnection urlConnection = null; try { url = new URL(urls[0]); urlConnection = (HttpURLConnection)url.openConnection(); InputStream in = urlConnection.getInputStream(); BufferedReader reader = new BufferedReader(new InputStreamReader(in)); for (String line; (line = reader.readLine()) != null; ) { html.append(line); } return html.toString(); } catch (Exception e){ e.printStackTrace(); return "Failed"; } finally{ in.close(); } }函数内执行它，就像文档准备好后的0.5到2秒一样所以页面的其余部分不会滞后。

预加载异步css图像和声音

1 个答案: