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

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

我想手动更改图片（image 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

---

尽管如此，我还是有一些问题（请参阅星号上的备注），我不知道如何始终获取加载图像的宽度+高度。

在设置图像src之前，您可以尝试设置onload handler，这样，即使您的图像被缓存，也应该可以获得正确的图像大小：

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

---

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

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

在UI页面中：script src=“JSVersionUpdate”（~/Scripts/Application/Abc.js）”

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

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

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

在UI页面中：script src=“JSVersionUpdate”（~/Scripts/Application/Abc.js）”

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

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

---

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

问题是在图像完成加载之前调用

width（）

和

height（）

，因此为零。将警报包含在

（“#id_image”）中。load（）

handler。问题是在映像完成加载之前调用

width（）

和

height（）

，因此为零。将警报放在

（“#id_image”）中。load（）

handler.Cool。这是我应该提到的宽度+高度的正确位置。（否则，在计算之前，我可能会得到width=height=0，特别是当我引用“pictures\\mypicture.jpg”+“？”+Math.random（）时，它总是使用我以前的代码返回width=height=0）。谢谢：）好的，我接受了你的回答。首先我不知道有一个接受答案的选项。酷。这是我应该提到的宽度+高度的正确位置。（否则，在计算之前，我可能会得到width=height=0，特别是当我引用“pictures\\mypicture.jpg”+“？”+Math.random（）时，它总是使用我以前的代码返回width=height=0）。谢谢：）好的，我接受了你的回答。首先我不知道有一个接受答案的选项。