使用 jQuery 插件缓慢加载图像答案

【问题标题】：Slow loading images with jQuery plugins使用 jQuery 插件缓慢加载图像
【发布时间】：2013-10-05 04:52:29
【问题描述】：

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

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

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

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

【问题讨论】：

是的，我的解决方案是我使用完整的CSS3 代码进行设计和背景我裁剪图像 1x1px
你能扩展一下你的解决方案吗？我不完全遵循。不幸的是，我必须支持IE8。所以 CSS3 可能不是一个选择。
我怀疑这些图像是您问题的原因。问题可能是由于多种可能性造成的，从响应时间慢、代码阻塞到 404 等简单的事情。这个网站是公开的吗？如果是这样，请发布链接。
对不起，它不在公共网站上。您的建议：我知道这不是 404，图像的路径很好。缓慢的响应时间似乎不太可能，因为页面的其余部分加载正常。阻塞代码是最有可能的。

标签： jquery asp.net-mvc-3 jquery-ui jqgrid jqplot

【解决方案1】：

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

<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();

【讨论】：