Javascript 内存高效的js图像管理 简介

我想使用html、css、javascript（jQuery）和近1000幅图像构建一个网页。 html页面非常长，大约5000px

当用户滚动页面时，我希望图像像动画书一样播放，作为页面的背景。例如，如果有1000个图像，并且用户已经滚动了页面的32%，那么他们将看到第320个图像。如果他们已经滚动了整个过程，他们将看到第1000幅图像

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

我试过的

从不从内存中删除图像

当用户滚动时，会加载更多图像，并且以前的图像设置为

display:none。这种方法是有效的，但随着用户滚动越来越远，它变得非常滞后

一次只在内存中保存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;
    }
});

我在谷歌上搜索了一下，然后把这些行放在一起。图像上没有事件处理程序，所以我相当确定这不值得担心

---

如何使GC能够收集图像内存？我所做的足以让GC从这些图像中释放内存吗？

您可以使用图像精灵，在其中您可以为多个图像创建一个图像，并可以使用坐标获取每个图像。

在JS中没有“已知或一致”的方法强制垃圾收集。您只需要确保清除对对象的所有引用，以便对它们进行垃圾收集。为此，

jE.remove（）周围的行基本上是无用的，因为它们只清理本地范围<代码>jE.remove（）是您唯一需要的。你有没有在chrome或safari中分析过这个应用程序，看看内存是不是你的问题？谢谢你的评论，我知道-我在最后一段的第二段做了一个小编辑来澄清！你能在DOM中插入图像的地方发布代码吗？从DOM中删除和重新插入图像可能比添加一次要花费更多的内存。。。另外，你应该看看那些想知道我自己解决了这个问题的人。我使用了多个元素，这导致了延迟。将图像加载到一个新的Image（）对象中，然后仅在单个对象上更改src属性就解决了我的问题。
jE.removeAttr('src');
jE.remove();
jE[0] = null;
e = null;