Question

当我创建页面时，我会遇到缓存问题。这是我的简化代码。

[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
    });
});

重点是：

[儿童网页]

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

每当我点击按钮并重新load子视图时，我希望子视图所具有的图像会发生变化。但是，由于缓存的图像，孩子的图像不会改变。我该怎么办呢？

我想用javascript解决它，因为有时jquery版本成为一个大问题，我总是考虑它的版本。所以我想让我的代码依赖于jQuery。（例如，jquery的async ajax的选项等等不能正常工作的IE版本）

Answer 1

您可以将当前时间添加为缓存断开器。

$(".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>

防止从jQuery加载缓存图像

1 个答案: