Кэширование изображений с помощью JS

Question

Я создаю 360-градусный просмотрщик, используя растровые фрагменты (листовки), в которых используется более 85 000 изображений для каждого вида. Для повышения производительности зрителя, я пытаюсь кэшировать все изображения, но WebBrowser всегда возвращается: сети :: ERR_INSUFFICIENT_RESOURCES

Так что мой вопрос, есть ли способ избежать этого?

Я использую setInterval(foo, 1000) для этого. Что-то вроде этого:

function restImg() { 
    counter = setInterval(ld, 2000); 
} 

function ld() { 
    if (!(nmb >= 80)) { 
     for (var i = 0; i < images.length; i++) { 
      var idx = images[i].indexOf("-"); 
      var path = images[i].substr(0, idx + 1); 
      nmb = parseInt(images[i].substr(idx + 1, 3)); 
      var rest = images[i].substr(idx + 4, images[i].length); 
      nmb++; 
      var img = ""; 
      if (nmb <= 9) { 
       images[i] = path + "00" + nmb + rest; 
       img = new Image(); 
       img.src = images[i]; 
      } else { 
       images[i] = path + "0" + nmb + rest; 
       img = new Image(); 
       img.src = images[i]; 
      } 
     } 
    } else { 
     clearInterval(counter); 
    } 
} 

Большое спасибо за вашу помощь!

Answer 1

Для того, чтобы кэшировать и обрабатывать изображения с ленивым изображением, уровень техники Service Workers. Это позволит вам иметь мелкозернистый контроль над кешем браузера, не полагаясь на javascript на странице.