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

Question

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

    $(document).ready(function () {

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

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

使用此代码进行加载文本:

 $.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 元素时，浏览器都会向服务器请求它。使用 CSS background-image，将仅请求一次图像，并且您可以多次使用它，而不会再次出现该问题。

.loading {
  display: inline-block;
  width: 16px;
  height: 16px;
  background: url(/image/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>