gpt4 book ai didi

javascript - 防止 jQuery 加载缓存图像

转载 作者:行者123 更新时间:2023-12-03 02:25:55 25 4
gpt4 key购买 nike

当我制作页面时,我遇到了缓存问题。这是我的简化代码。

[HTML]

<body>
<div>here parent contents</div>
<input id="btn1" class="btn" data-val="1" type="button" />
<input id="btn2" class="btn" data-val="2" type="button" />
<input id="btn3" class="btn" data-val="3" type="button" />
<div id="childContents"></div>
</body>

[javascript]

$(".btn").click(function (e) {
$("#childContents").load("url?val=" + e.getAttribute("data-val"),
function () {
success call back function
});
});

重点是:

[子 Html]

<!-- the image change depanding on some condition -->
<div style="background-image: url('imgUrl')">
contents
</div>

每当我单击按钮并重新加载 subview 时,我希望 subview 所具有的图像发生变化。但自从缓存图像后, child 的图像就没有改变。我能为它做些什么呢?

我想用javascript来解决它,因为有时jquery版本会成为一个大问题,我总是考虑它的版本。所以我想让我的代码对 jQuery 的依赖性很小。 (例如jquery的async ajax选项等在低版本的IE中不起作用)

最佳答案

您可以添加当前时间作为缓存断路器。

$(".btn").click(function (e) {
$("#childContents").load("url?val=" + e.getAttribute("data-val"),
function () {
//get time since 1970 in milliseonds
var d = new Date();
var n = d.UTC();
//append a cache breaker
var imgUrl = "background.jpg" + "?t=" + n;
//set the img url
$('#backgrounddiv').css('background-image', 'url("'+imgUrl+'")');

});
});


<div id="backgrounddiv" style="background-image: url('background.jpg')">
contents
</div>

关于javascript - 防止 jQuery 加载缓存图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48945562/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com