通过 jQuery 加载的图像在第一页加载后不加载

Question

我从一个文件夹加载所有 jpg/png 图像并将其附加到一个元素，然后当元素“准备好”时，我给它一些悬停效果等。但是，在我第一次加载页面后，如果我要刷新它，图像将不再加载。这是我用来加载图像的代码。

var folder = "images/";
$.ajax({
    url: folder,
    success: function (data) {
        $(data).find("a").attr("href", function (i, file) {
            if (file.match(/\.(jpe?g|png)$/)) {
                $("div#whatever").append("<img class='gallery' src='"+ folder + file +"'>");
            }
        });
    }
});

再次，它可以工作，但是一旦我刷新页面，它就不再加载它们，除非我在 Chrome 中清除缓存的图像。有没有办法强制刷新？这会是正确的方法吗？

Answer 1

尝试使用Math.floor((Math.random() * 1000) + 1)，这是一个随机数，将其添加到您的图像源中。或您可能需要在 ajax 中尝试cache: false

var folder = "images/";
var RandomNum = Math.floor((Math.random() * 1000) + 1);
$.ajax({
    url: folder,
    cache: false,  //<<<<<<<<<<<<<<<< here
    success: function (data) {
        $(data).find("a").attr("href", function (i, file) {
            if (file.match(/\.(jpe?g|png)$/)) {
                $("div#whatever").append("<img class='gallery' src='"+ folder + file +"?"+RandomNum +"'>");
            }
        });
    }
});