问

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

指间流年发布于 2022-12-08 20:40

asp.net

我将以下代码添加到我的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 ...",
    pgtext : "Page {0} of {1}"
},

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

在此输入图像描述

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

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

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>


                
                    2022-12-11 03:12  回答
                       手浪用户2602931657



    
    
        今天，你开发时遇到什么问题呢？
        立即提问
    

    
        热门标签