Sie benötigen keinen erweiterten Ressourcenmanager, es sei denn, Sie gehen über das hinaus, was vernünftigerweise im Speicher gespeichert werden kann. Dies gilt auch für Desktop-Spiele. Die meisten "kleinen" Spiele müssen beim Start einfach alles in den Speicher laden und sind dann bei Bedarf verfügbar.
In HTML und JavaScript haben Sie nicht die gleiche direkte Kontrolle über Ressourcen. Der Browser verfügt über einen integrierten Ressourcenmanager, der für Sie arbeitet. Es kann jedoch eine gute Idee sein, ein wenig zu helfen, um zu erreichen, dass alle Bilder beim Start geladen werden und sie nicht entladen werden, wenn sie nicht verwendet werden.
Zu diesem Zweck können Sie eine Reihe von Bildelementen erstellen und die erforderlichen Bilder an diese anhängen. Dadurch werden die Bilder geladen und bleiben im Speicher. Sie müssen sie nicht einmal an das Dokument anhängen, sie können einfach als virtuelle Entitäten in Ihrem Skript vorhanden sein.
Hier ist der Ladeteil eines Spiels, das ich geschrieben habe. Es lädt 27 Bilder auf die beschriebene Weise, überprüft kontinuierlich, ob sie alle zusammen mit dem Dokumententext geladen wurden, zeigt dem Benutzer einen Zähler an, der angibt, wie weit das Laden fortgeschritten ist, und ruft schließlich eine Funktion auf, um das Menü zu rendern, wenn alle Assets vorhanden sind geladen.
<body onload="bodyloaded=1">
<div id='maindivid'>
<p id='loadtext' style='text-align:center;'>
Loading 0/28
</p>
</div>
<script type="text/javascript">
bodyloaded=0
prlimg=new Array
for(a=0;3>a;a++){
prlimg[a]=new Array
for(b=0;3>b;b++){
prlimg[a][b]=new Array
for(c=0;3>c;c++){
prlimg[a][b][c] = new Image
prlimg[a][b][c].src = a+(b+(c+".png"))
}
}
}
function updateload(){
elementsloaded=bodyloaded
for(a=0;3>a;a++){
for(b=0;3>b;b++){
for(c=0;3>c;c++){
elementsloaded+=prlimg[a][b][c].complete
}
}
}
document.getElementById('loadtext').innerHTML="Loading "+elementsloaded+"/28"
if(elementsloaded==28){menu()}
else{setTimeout("updateload()",100)}
}
updateload()
</script>
//Further code goes here
</body>
Sehen Sie den Code in Aktion .
Wenn ich es mir noch einmal anschaue, gibt es ein paar Dinge, die ich anders hätte tun können, aber es sollte ausreichen, um die Funktionalität zu demonstrieren.