0

我有一个 asp.net MVC 应用程序，我在一个视图中显示了许多图像，这些图像的数量在每组 100 到 2500 之间。在视图中，我为每个组预加载图像，然后从下拉列表中选择不同的组，这将刷新页面。第一次预加载效果很好，但是，当我更改组时，它非常慢。对这些图像的引用位于 MS SQL 数据库中，特定组的图像列表来自控制器 (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，这是正确的方法吗. 提前致谢。

4

1 回答 1

1

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

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

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

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

回答您的其他一些问题。

不，除了加载更少的图像（如上所述）或减小每个图像的大小之外，您无法加快它们的速度。浏览器一次只会通过网络发出 N 个图像请求（可能避免服务器超载），因此其余的将排队等待一个完成，然后发出下一个请求，等等......

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

于 2012-09-02T23:44:06.653 回答