Как заставить веб-страницу загружать тысячи или даже миллионы различных изображений в качестве фона HTML без сбоев или замедления работы браузера?
Изображения могут быть созданы динамически или связаны с их папкой. Я смог сделать это для 1000 изображений на холсте и добавить гораздо больше холста, но при 30 холстах, то есть 30 000 изображений, браузер перестает отвечать (замедляется).
К вашему сведению: изображения должны отображаться одновременно.
<html>
<body>
<script>
var cInt=0;
var loopCInt=0;
while (loopCInt<3){
var canvasName = document.createElement("canvas");
canvasName.setAttribute('width', "1000");
canvasName.setAttribute('height', "1000");
var canvasIdName="myCanvas"+cInt;
canvasName.setAttribute('id', canvasIdName);
document.body.appendChild(canvasName);
var c = document.getElementById(canvasIdName);
var ctx = c.getContext("2d");
var i = 0;
var right=0;
var tops=0;
var goDown=0;
while (i <= 1000) {
ctx.beginPath();
ctx.rect(right, goDown, 30, 30);
ctx.fillStyle = '#'+Math.random().toString(16).slice(-6);
ctx.fill();
i++;
right=right+30;
tops++;
if (tops==30){
goDown=goDown+30;
right=0;
tops=0;
}
}
loopCInt++;
cInt++;
}
</script>
</body>
</html>