4

我将以下代码添加到我的 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 加载图像显示如下之前：

在此处输入图像描述

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

对于如何实现我的目标，这里最好的建议是什么？

4

9 回答 9

15

每当您使用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>

于 2015-01-22T03:44:20.453 回答
3

根据 W3C 给出的规范，URL 实际上是区分大小写的。

当然，在windows文件系统中，大小写无关紧要，所以对于服务器来说这两个是同一个文件

/content/images/ajax-loader.gif
/Content/Images/ajax-loader.gif

无论您使用哪种情况（在 Windows 上），服务器都会提供图像。

但是，所有浏览器实际上都遵循 URL 的规范，并将这两个 URL 视为两个不同的资源。

对于浏览器来说，这是两个不同的文件，缓存一个不会缓存另一个。

换句话说，您正在缓存一个资源，然后加载完全不同的资源，因为您没有使用相同的案例。

确保您键入的 URL 完全相同，通常只使用小写字母即可

$(document).ready(function () {

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

    $.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}"
     },
   .......
于 2015-01-23T13:27:01.930 回答
1

我认为缓存图像的唯一正确方法是max-age在服务器响应的标头中设置一些（我的意思是类似 Cache-Control: max-age=691200或更高的东西）。您甚至可以从 Internet/Intranet 中的任何其他位置加载 GIF ，您可以更轻松地指定 GIF 文件的缓存属性。

如果您的站点在 IIS7 或更高版本上运行，您可以添加该部分

<staticContent>
    <clientCache cacheControlMaxAge="7.00:00:00" cacheControlMode="UseMaxAge" />
</staticContent>

内<system.webserver>（见链接和这里）。

于 2014-11-30T16:15:11.643 回答
1

将此图像放在母版页顶部的隐藏元素中。

<div style="display: none;"><img src="/content/images/ajax-loader.gif"></div>

您正在 document.ready() 上的母版页中加载此图像，该图像在完整页面加载时被调用。而且我觉得您的显示此 gif 的新页面可能尚未从服务器获取。

要检查是否每次都在下载图像，请使用谷歌浏览器开发者屏幕的网络选项卡。

于 2015-01-22T11:35:05.493 回答
1

由于浏览器可能会忽略 Javascrip 生成的相对图像路径，我建议你使用这个：

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

它的风格是这样的：

.ajax-loader {
  background: url('Images/ajax-loader.gif');
}

请注意，如果您想避免在下次访问中获得相同的图像（当前会话中不需要），则需要配置服务器缓存。

于 2015-01-22T13:30:57.773 回答
1

尝试使用数据 URI

  $.jgrid = $.jgrid || {};
  $.extend($.jgrid, {
      defaults: {
        recordtext: "View {0} - {1} of {2}",
        emptyrecords: "No records to view",
        loadtext: "Loading Data ...<img src=data:image/gif;base64,R0lGODlhEAAQAPIAAP///wAAAMLCwkJCQgAAAGJiYoKCgpKSkiH+GkNyZWF0ZWQgd2l0aCBhamF4bG9hZC5pbmZvACH5BAAKAAAAIf8LTkVUU0NBUEUyLjADAQAAACwAAAAAEAAQAAADMwi63P4wyklrE2MIOggZnAdOmGYJRbExwroUmcG2LmDEwnHQLVsYOd2mBzkYDAdKa+dIAAAh+QQACgABACwAAAAAEAAQAAADNAi63P5OjCEgG4QMu7DmikRxQlFUYDEZIGBMRVsaqHwctXXf7WEYB4Ag1xjihkMZsiUkKhIAIfkEAAoAAgAsAAAAABAAEAAAAzYIujIjK8pByJDMlFYvBoVjHA70GU7xSUJhmKtwHPAKzLO9HMaoKwJZ7Rf8AYPDDzKpZBqfvwQAIfkEAAoAAwAsAAAAABAAEAAAAzMIumIlK8oyhpHsnFZfhYumCYUhDAQxRIdhHBGqRoKw0R8DYlJd8z0fMDgsGo/IpHI5TAAAIfkEAAoABAAsAAAAABAAEAAAAzIIunInK0rnZBTwGPNMgQwmdsNgXGJUlIWEuR5oWUIpz8pAEAMe6TwfwyYsGo/IpFKSAAAh+QQACgAFACwAAAAAEAAQAAADMwi6IMKQORfjdOe82p4wGccc4CEuQradylesojEMBgsUc2G7sDX3lQGBMLAJibufbSlKAAAh+QQACgAGACwAAAAAEAAQAAADMgi63P7wCRHZnFVdmgHu2nFwlWCI3WGc3TSWhUFGxTAUkGCbtgENBMJAEJsxgMLWzpEAACH5BAAKAAcALAAAAAAQABAAAAMyCLrc/jDKSatlQtScKdceCAjDII7HcQ4EMTCpyrCuUBjCYRgHVtqlAiB1YhiCnlsRkAAAOwAAAAAAAAAAAA== />",
        pgtext: "Page {0} of {1}"
      }
  });


$(document).ready(function() {
      $.jgrid = $.jgrid || {};
      $.extend($.jgrid, {
          defaults: {
            recordtext: "View {0} - {1} of {2}",
            emptyrecords: "No records to view",
            loadtext: "Loading Data ...<img src=data:image/gif;base64,R0lGODlhEAAQAPIAAP///wAAAMLCwkJCQgAAAGJiYoKCgpKSkiH+GkNyZWF0ZWQgd2l0aCBhamF4bG9hZC5pbmZvACH5BAAKAAAAIf8LTkVUU0NBUEUyLjADAQAAACwAAAAAEAAQAAADMwi63P4wyklrE2MIOggZnAdOmGYJRbExwroUmcG2LmDEwnHQLVsYOd2mBzkYDAdKa+dIAAAh+QQACgABACwAAAAAEAAQAAADNAi63P5OjCEgG4QMu7DmikRxQlFUYDEZIGBMRVsaqHwctXXf7WEYB4Ag1xjihkMZsiUkKhIAIfkEAAoAAgAsAAAAABAAEAAAAzYIujIjK8pByJDMlFYvBoVjHA70GU7xSUJhmKtwHPAKzLO9HMaoKwJZ7Rf8AYPDDzKpZBqfvwQAIfkEAAoAAwAsAAAAABAAEAAAAzMIumIlK8oyhpHsnFZfhYumCYUhDAQxRIdhHBGqRoKw0R8DYlJd8z0fMDgsGo/IpHI5TAAAIfkEAAoABAAsAAAAABAAEAAAAzIIunInK0rnZBTwGPNMgQwmdsNgXGJUlIWEuR5oWUIpz8pAEAMe6TwfwyYsGo/IpFKSAAAh+QQACgAFACwAAAAAEAAQAAADMwi6IMKQORfjdOe82p4wGccc4CEuQradylesojEMBgsUc2G7sDX3lQGBMLAJibufbSlKAAAh+QQACgAGACwAAAAAEAAQAAADMgi63P7wCRHZnFVdmgHu2nFwlWCI3WGc3TSWhUFGxTAUkGCbtgENBMJAEJsxgMLWzpEAACH5BAAKAAcALAAAAAAQABAAAAMyCLrc/jDKSatlQtScKdceCAjDII7HcQ4EMTCpyrCuUBjCYRgHVtqlAiB1YhiCnlsRkAAAOwAAAAAAAAAAAA== />",
            pgtext: "Page {0} of {1}"
            }
          });
          $("#results").append($.jgrid.defaults.loadtext)
});
  
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="results"></div>

于 2015-01-26T01:54:16.637 回答
1

您可以预加载图像：

function preloadImage(images) {
    $(arrayOfImages).each(function(){
        (new Image()).src = this;
    });
}

$(document).ready(function () {
    preloadImage([
        '/content/images/ajax-loader.gif'
    ]);
...
于 2015-01-26T20:24:49.487 回答
1

<body><img src="content/images/loader.gif" style="display: none" />

可能很简单src="i/l.gif"，如果您松开 content/images 文件夹以支持名为 i 的文件夹，并为常见图像起一个小名称以节省带宽。

于 2015-01-27T20:47:23.990 回答
1

要预加载图像，您应该将图像附加到文档中。

var x = new Image();
x.src = "/content/images/ajax-loader.gif";
x.style.width = "1px";
x.style.height = "1px";
document.getElementsByTagName("body").appendChild(x);

但要确保 100% 确保图像在使用前可用，甚至在预加载完成之前。你应该使用 data-uri 图像。

 $.jgrid = $.jgrid || {};
 var imageData = "data:image/gif;base64,R0lGODlhEAAQAPIAAP///wAAAMLCwkJCQgAAAGJiYoKCgpKSkiH+GkNyZWF0ZWQgd2l0aCBhamF4bG9hZC5pbmZvACH5BAAKAAAAIf8LTkVUU0NBUEUyLjADAQAAACwAAAAAEAAQAAADMwi63P4wyklrE2MIOggZnAdOmGYJRbExwroUmcG2LmDEwnHQLVsYOd2mBzkYDAdKa+dIAAAh+QQACgABACwAAAAAEAAQAAADNAi63P5OjCEgG4QMu7DmikRxQlFUYDEZIGBMRVsaqHwctXXf7WEYB4Ag1xjihkMZsiUkKhIAIfkEAAoAAgAsAAAAABAAEAAAAzYIujIjK8pByJDMlFYvBoVjHA70GU7xSUJhmKtwHPAKzLO9HMaoKwJZ7Rf8AYPDDzKpZBqfvwQAIfkEAAoAAwAsAAAAABAAEAAAAzMIumIlK8oyhpHsnFZfhYumCYUhDAQxRIdhHBGqRoKw0R8DYlJd8z0fMDgsGo/IpHI5TAAAIfkEAAoABAAsAAAAABAAEAAAAzIIunInK0rnZBTwGPNMgQwmdsNgXGJUlIWEuR5oWUIpz8pAEAMe6TwfwyYsGo/IpFKSAAAh+QQACgAFACwAAAAAEAAQAAADMwi6IMKQORfjdOe82p4wGccc4CEuQradylesojEMBgsUc2G7sDX3lQGBMLAJibufbSlKAAAh+QQACgAGACwAAAAAEAAQAAADMgi63P7wCRHZnFVdmgHu2nFwlWCI3WGc3TSWhUFGxTAUkGCbtgENBMJAEJsxgMLWzpEAACH5BAAKAAcALAAAAAAQABAAAAMyCLrc/jDKSatlQtScKdceCAjDII7HcQ4EMTCpyrCuUBjCYRgHVtqlAiB1YhiCnlsRkAAAOwAAAAAAAAAAAA==";
 $.extend($.jgrid,{
   defaults : {
    recordtext: "View {0} - {1} of {2}",
    emptyrecords: "No records to view",
    loadtext: "Loading Data ...<img src='" +imageData+ "' />",
    pgtext : "Page {0} of {1}"
},

那里有很多数据 uri 生成器，例如http://dopiaza.org/tools/datauri/index.php 。

于 2015-01-28T06:02:33.277 回答