0

我正在使用 jQuery 构建一个网站。两件大事：

  1. 我想手动更改图片（图像 src），但有时图片没有更改（我现在正在使用 chrome，但我想要一个通用的解决方案）。
  2. 另外，我想在加载图片后获取图像宽度+高度。（图片是来自服务器的文件 - 我只是使用不同的文件名）。

当通过 JavaScript/jQuery 更改图像时 - 我意识到当我更改一次图像时，它会保存在内存中，所以我遇到了一些问题。

我发现由于缓存问题，第二次没有上传图像，所以当我做了一些解决方法时，我意识到我需要执行 JavaScript 命令，例如：

$("#id_image").attr("src", "pictures\\mypicture.jpg" + "?" + Math.random());

这就是我手动更改图像的方式。

通过使用Math.random()我遇到了第二个问题：

如果我Math.random()在行前写：

$("#id_image").width("auto");
$("#id_image").height("auto");

使用后我没有得到高度+宽度Math.random()，所以我换了一行，最后我的代码是：

$("#id_image").width("auto");
$("#id_image").height("auto");
$("#id_image").attr("src", "pictures\\mypicture.jpg");
$("#id_image").attr("src", "pictures\\mypicture.jpg" + "?" + Math.random());
alert("#id_image").width()); // **** returns 0 sometimes due cache
alert("#id_image").height()); // **** returns 0 sometimes due cache

尽管如此，我还是有一些问题（见星号注释），我不知道如何总是得到加载图像的宽度+高度。

4

2 回答 2

4

您可以在设置图像 src 之前尝试设置 onload 处理程序，这样，即使您的图像被缓存，这也应该为您提供正确的图像大小：

$("#id_image").on('load',function(){
   alert($(this).width()); 
   alert($(this).height()); 
});
$("#id_image").attr("src", "pictures\mypicture.jpg");
于 2013-05-31T11:16:32.910 回答
0 
  VersionNumber = System.Configuration.ConfigurationManager.AppSettings["Version"];

    //Caching Issues For JS
    public static string JSVersionUpdate(string JsFile)
    {
        StringBuilder str = new StringBuilder();
        str.Append(GetQualifiedPath(JsFile));
        str.Append("?Version=");
        str.Append(VersionNumber);
        return str.ToString();
    }

    public static void DiscardVersion()
    {
        VersionNumber = null;
    }

    //get Full Path for JS File
    private static string GetQualifiedPath(string path)
    {
        var httpRequestBase = new System.Web.HttpContextWrapper(System.Web.HttpContext.Current);

        path = path.Replace("~", string.Empty);

        string appPath = string.Empty;
        if (httpRequestBase != null)
        {
            //Formatting the fully qualified website url/name
            appPath = string.Format("{0}://{1}{2}{3}{4}",
                        httpRequestBase.Request.Url.Scheme,
                        httpRequestBase.Request.Url.Host,
                        httpRequestBase.Request.Url.Port == 80 ? string.Empty : ":" + httpRequestBase.Request.Url.Port,
                        httpRequestBase.Request.ApplicationPath,
                        path);
        }
        appPath = appPath.TrimEnd('/');

        return appPath;
    } 
}

在 UI 页面中：脚本 src="JSVersionUpdate("~/Scripts/Application/Abc.js")"

O/p：~/Scripts/Application/Abc.js/version=1.0

浏览器仅在版本不同时才从服务器请求 JS 文件，否则它将被缓存出来。现在我不需要告诉别人在部署后一次又一次地清除缓存。我唯一要做的就是在 Web 配置中更改版本号。

同样也可以应用于图像！希望能帮助到你

于 2017-07-11T10:05:07.880 回答