jquery - 使用 jQuery 插件缓慢加载图像

Question

我有一个 ASP.NET MVC3 网站，它使用了几个 jQuery 插件（jqGrid和jqPlot）。我不时注意到，尤其是当我使用新的 CSS 开发新页面时，图像加载速度很慢；有时需要超过一分钟才能出现。

在 jqGrid 上，我主要注意到来自 jQuery UI sprite ( images/ui-icons_6da8d5_256x240.png) 的分页图标。

在 jqPlot 上，我在使用带有图像背景 ( url(/Content/images/gray_block.png)) 的 CSS 类的自定义点标签上注意到了这一点。

在这两种情况下，图像的路径都是有效的，但由于某种原因，它们的出现速度很慢。有没有其他人遇到过类似的问题？

Answer 1

预加载图像解决了这个问题。我在这里使用了解决方案。

<script type="text/javascript">
    $.fn.preload = function () {
        this.each(function () {
            $('<img/>')[0].src = this;
        });
    }
</script>

// pre-cache icons
$(['@Url.Content("~/Content/images/orange_block.png")', 
   '@Url.Content("~/Content/images/yellow_block.png")', 
   '@Url.Content("~/Content/images/red_block.png")',
   '@Url.Content("~/Content/images/gray_block.png")',
   '@Url.Content("~/Content/themes/custom-theme/images/ui-icons_217bc0_256x240.png")'
 ]).preload();