Javascript图像数组预加载速度和从内存中删除

Javascript images array preload speed and remove from memory

本文关键字：内存 删除 速度 图像 数组 加载 Javascript      更新时间：2023-09-26

我有一个asp.net MVC应用程序，在该应用程序中，我在视图中显示了许多图像，这些图像的数量在每组100到2500之间。在视图中，我为每个组预加载图像，然后从下拉列表中选择不同的组，这将刷新页面。第一次预加载效果很好，然而，当我改变组时，它非常慢。对这些图像的引用在MS SQL数据库中，特定gorup的图像列表来自控制器（C#）。这是我正在使用的Javascript：

        var impath = $("#ImagePath").val();
        var im = $("#ImageName").val();
        var images = null;
        var images = [];
        var tochar = $("#lastchar").val();

        function preload_images() {
            var i;
            for (i = tochar; i < sl; i++) {
                images[i] = new Image();
                var name = impath.toString() + im.toString() + i;
            }
        }

我的问题是，有一种方法可以加快预加载过程，在加载下一组之前，我是否需要从内存中删除预加载的图像，以及如何删除它们，我使用了images=null，这是正确的方法吗。提前谢谢。

处理这么多图像的最佳方法是使用精灵。使用精灵，可以加载一个较大的图像，其中包含许多较小的图像。由于在浏览器中加载单个图像要比加载许多小图像快得多，因此预加载可能会快得多。事实上，您可以直接预加载一个包含整个子图像块的图像。

然后，如果要显示其中一个图像，则只显示图像的剪裁部分。有很多方法可以实现这种显示，但一种常见的方法是创建所需单元格大小的对象，并将较大的图像显示为具有适当偏移的背景，以与较大图像的所需部分对齐。

这里有一个关于CSS和精灵的有用参考：http://css-tricks.com/css-sprites/

您必须在服务器端创建适当的精灵才能使用此技术。

回答你的其他一些问题。

不，除了加载更少的图像（如上所述）或缩小每个图像的大小之外，你不能再加快它们的速度了。浏览器一次只会通过网络发出N个图像请求（可能是为了避免服务器过载），所以其余的都会排队，直到一个完成，然后再发出下一个请求，等等

你可以从内存中释放图像，只需确保你不再持有对它们的引用。这样，浏览器垃圾收集器将清理您创建的Image（）对象。在您的代码设置中，只要这些Image（）对象没有在其他地方被引用，images = null或images = []就会实现这一点。这些图像仍将保留在浏览器的缓存中，并且基本上仍将被预加载（如果再次被引用，则不必通过网络加载）。

相关文章：