内存高效的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;

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

如何启用GC收集图像内存？我正在做什么足够以允许GC从这些图像中释放内存？

Answer 1

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