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

时间：2014-11-30 13:32:09

标签： jquery asp.net-mvc image jqgrid image-caching

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

enter image description here 

    $(document).ready(function () {

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

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

的示例

enter image description here

将此代码用于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加载图像显示如下之前：

enter image description here

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

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

9 个答案:

答案 0 :(得分：15)

每当使用img元素时，浏览器就会从服务器请求。使用 CSS background-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>

答案 1 :(得分：3)

根据W3C提供的规范，URL实际上区分大小写。

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

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

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

但是，所有浏览器实际上都遵循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}"
     },
   .......

答案 2 :(得分：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>内（请参阅the link和here）。

答案 3 :(得分：1)

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

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

您正在document.ready（）的母版页中加载此图片，该图片会在完整页面加载时调用。我觉得有可能你的新gif页面出现的新页面已经没有从服务器上获取了。

要检查每次是否正在下载图片，请使用Google Chrome开发人员屏幕的网络标签。

答案 4 :(得分：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');
}

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

答案 5 :(得分：1)

尝试使用data URIs 

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

答案 6 :(得分：1)

您可以预加载图片：

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

$(document).ready(function () {
    preloadImage([
        '/content/images/ajax-loader.gif'
    ]);
...

答案 7 :(得分：1)

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

如果您放弃内容/图像文件夹而不是名为i的文件夹，并为常用图像提供一个小名称以节省带宽，则可能只是src="i/l.gif"。

答案 8 :(得分：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 image。

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

相关问题
最新问题