如何在我的网站上可靠地预加载和缓存我的ajax加载图像？

Question

我将以下代码添加到我的asp.net-mvc site.master页面,其目标是确保此图像预先加载并缓存(因为我在我的网站上使用它):

    $(document).ready(function () {

        var x = new Image();
        x.src = "/content/images/ajax-loader.gif";

我假设这个代码会强制预加载和缓存这个ajax加载图像但是当我运行一个引用这个图像的页面时,我仍然会看到这几秒钟.这是一个jqgrid加载div的示例

它将此代码用于loadtext:

 $.jgrid = $.jgrid || {};
 $.extend($.jgrid,{
   defaults : {
    recordtext: "View {0} - {1} of {2}",
    emptyrecords: "No records to view",
    loadtext: "Loading Data ...<img src='/Content/Images/ajax-loader.gif' />",
    pgtext : "Page {0} of {1}"
},

在我的实际ajax加载图像显示如下:

是否有任何可能导致此问题的建议以及如何确保在尝试使用此映像之前加载和缓存此映像？我的解决方案实际上是每次重载文件吗？

如何实现目标的最佳建议是什么？

Answer 1

无论何时使用img元素,浏览器都会从服务器请求它.使用CSSbackground-image,只会请求图像一次,您可以多次使用它,而不会再次看到该问题.

.loading {
  display: inline-block;
  width: 16px;
  height: 16px;
  background: url(http://i.stack.imgur.com/CRmPi.gif);
}

<div>Hello World <span class="loading"></span></div>
<div>Hello World <span class="loading"></span></div>
<div>Hello World <span class="loading"></span></div>