Question

我有一个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，这是正确的方式。提前谢谢。

Answer 1

处理许多图像的最佳方法是使用精灵。使用精灵，您可以加载一个包含许多较小图像的较大图像。由于加载单个图像很多，浏览器比加载大量小图像要快得多，因此预加载速度要快得多。事实上，你可以简单地预加载一个包含整个子图像块的图像。

然后，当您想要显示其中一个图像时，只显示图像的剪切部分。有许多方法可以进行显示，但常见的方法是创建所需单元格大小的对象，并将较大的图像显示为具有适当偏移的背景，以与较大图像的所需部分对齐。

这是关于CSS和sprites的有用参考：http://css-tricks.com/css-sprites/

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

回答你的一些其他问题。

不，除了加载较少的图像（如上所述）或缩小每张图像的大小之外，您无法再加快速度。浏览器一次只能通过网络一次发出N个图像请求（可能会避免服务器超载），所以其余部分将排队等候直到一个完成，然后下一个请求将被发送等等......

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

Javascript图像阵列预加载速度并从内存中删除

1 个答案: