[英]preload asynchronously css images and sounds
該網站的所有資產都位於一系列對象中,這些對象將在用戶互動后顯示,例如滑塊。
{"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); }
這個鏈接或類似的東西可以解決這個問題,但是在閱讀文檔后,當資產來源位於將由js管理的數組中時,找不到適用於該文檔的方法。
您必須遍歷對象數組以加載它們。
編輯
由於您有很多圖片無法通過CSS加載。
我建議您刪除所有這些backgroung-image:url('...');
並將這些URL放在您的json中,如下所示:
{"id":"1","icon":"icon-name-class", "icon_url":"http://domain/path/file.jpg", "sound":"sound-name","sound_url":"http://domain/path/file.mp3"},
並對您的聲音網址執行相同的操作。
加! 從長遠來看,它將簡化維護工作...如果有一天您發現URL損壞。
然后,可以像這樣進行預加載:
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);
}
因此它不會在任何地方顯示或播放...
但是瀏覽器會加載它。
您可能必須通過CSS隱藏音頻播放器:
audio{
display:none;
}
我做了一個CodePen演示 ,以確保它能正常工作。
json中只有3個項目...
而且圖像和聲音很小。
因此,您將不會在此演示中真正注意到負載延遲。 ;)
我建議您將此腳本放在document.ready()
包裝器中。
在setTimeout()
函數中,可以在文檔准備就緒后0.5到2秒內執行它。
因此,您頁面的其余部分不會滯后。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.