当您使用 IMG 元素，浏览器会要求从服务器。使用 CSS 背景图片 后，将请求图像的只有一次，然后你可以用它多次，没有看到再这个问题。

  .loading {\r
  显示：inline-block的;\r
  宽度：16px的;\r
  高度：16px的;\r
  背景：网址（http://i.stack.imgur.com/CRmPi.gif）;\r
}  

 ＆LT; D​​IV＆GT;的Hello World＆LT;跨度类=加载＆GT;＆LT ; / SPAN＆GT;＆LT; / DIV＆GT;\r
＆LT; D​​IV＆GT;的Hello World＆LT;跨度类=加载＆GT;＆LT; / SPAN＆GT;＆LT; / DIV＆GT;\r
＆LT; D​​IV＆GT;的Hello World＆LT;跨度类=加载＆GT;＆LT; / SPAN＆GT;＆LT; / DIV＆GT;  

I added the following code to my asp.net-mvc site.master page with the goal is making sure this image gets loaded upfront and cached (as I use it all over my site):

    $(document).ready(function () {

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

I am assuming this code would force a preload and cache of this ajax loading image but when i run a page that references this image, i still see this for a few seconds. Here is an example of a jqgrid loading div

which uses this code for 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}"
},

before my actual ajax loading image shows like below:

Is there any suggestion for what could be causing this and how to ensure this image is loaded and cached prior to trying to use it? Is my solution actually redownloading the file each time?

What is the best recommendation here for how to achieve my goal?

Whenever you use an img element, the browser will request it from server. Using CSS background-image, will request the image only once, and you can use it multiple times, without seeing that problem again.

.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>