时间戳

首页 > 解决方案 > 通过 JavaScript 预加载/预取大量远程图像

javascript - 通过 JavaScript 预加载/预取大量远程图像

问题描述

我正在使用 JavaScript（如下所示）来预加载/预取图像。用例是我有多达 30,000 条记录的客户端可搜索列表，当用户使用搜索时，我希望与搜索结果关联的头像/图像立即呈现。

在将下面的代码与大量图像（即 5,000 个图像）一起使用时，我遇到了明显的浏览器性能问题（浏览器和其他 JS 代码开始变得不那么敏感）。

有没有人有关于如何优化此代码以更好地执行的建议？或者，有没有办法使用 Service Worker 在后台执行此操作？

function prefetchImages(arr) {
  var cache = document.createElement("CACHE");
  cache.style = "position:absolute;z-index:-1000;opacity:0;";
  document.body.appendChild(cache);

  for (var i=0; i<arr.length; i++) {
    var img = new Image();
    img.src = arr[i];
    img.style = "position:absolute";
    cache.appendChild(img);
  }
}

prefetchImages(['https://avatars.githubusercontent.com/u/9919?s=200&v=4']

标签： javascriptperformanceprogressive-web-appsservice-worker

解决方案

推荐阅读