节省内存的 js 图像管理

Question

简介

我想使用 html、css、javascript (jQuery) 和近 1000 张图片构建一个网页。 html页面很长，大概5000px左右。

当用户滚动页面时，我希望图像像翻书一样作为页面背景播放。例如，如果有 1000 张图像并且用户滚动了 32% 的页面，他们将查看第 320 张图像。如果他们一直滚动，他们正在查看第 1000 张图像。

我应该如何有效地处理这个？每张图片的文件大小约为 150kb，最重要的是我希望避免进一步压缩这些图片。

我的尝试

1. 永远不要从内存中删除图像

   随着用户滚动加载更多图像，之前的图像设置为display: none;。这种方法有效，但随着用户滚动的越来越远，变得非常滞后。

2. 一次只能在内存中保存 40 张图像

   当用户滚动当前图像时，会加载当前图像前后的 20 个图像。任何超过 20 次翻转的图像都将“从内存中删除”。 仍然变得迟钝（可能是因为我没有正确处理内存 - 我会解决的）

问题 1

你们建议我在这个项目中使用什么技术？

我觉得我的选项 2 应该是有效的，但我很想听听更多建议。

问题 2

如何正确地从 DOM 和内存中删除图像？

我很确定如果我希望这个项目成功，我将需要最终删除图像。

目前的做法

这是我目前的方法：

var imageNum = -The current image number that ought to be showing-;
var flip = -the container element holding all the images-;

flip.children().each(function(i, e) { 
    var jE = $(e);
    var childInd = parseInt(jE.data('page-number'));

    if (childInd < imageNum - 20 || childInd > imageNum + 20) {
        jE.removeAttr('src');
        jE.remove();
        jE = null;
        e = null;
    }
});

这部分尤其是我不确定我是否正确释放内存的地方：

jE.removeAttr('src');
jE.remove();
jE[0] = null;
e = null;

经过一番谷歌搜索后，我将这些行放在一起。图像上没有事件处理程序，所以我很确定这不是问题。

如何让 GC 收集图像内存？我正在做的事情足够让 GC 从这些图像中释放内存吗？

Answer 1

您可以使用图像精灵，其中您可以为多个图像制作单个图像，并且可以获取每个图像的坐标。