Question

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

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

通过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

不过，我有一些问题（请参阅星号上的评论），我不知道如何始终获取加载图像的宽度+高度。

Answer 1

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

$("#id_image").on('load',function(){
   alert($(this).width()); 
   alert($(this).height()); 
});
$("#id_image").attr("src", "pictures\mypicture.jpg");

Answer 2

  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页面中：script src =“JSVersionUpdate（”〜/ Scripts / Application / Abc.js“）”

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

浏览器请求来自服务器的JS文件只有当版本不同时它才会缓存出来。现在我不需要告诉别人在部署后一次又一次地清除缓存。我只是更改了版本号Web COnfig。

同样可以应用于图像！希望它有助于

通过javascript更改图像src - 缓存问题

2 个答案: