javascript - fancybox 确保 fancybox-image 不被缓存

Question

我遇到了 fancybox 加载缓存图像的问题。我想确保图像在出现在页面上之前不会被缓存，但我没有成功地尝试通过其各种回调(beforeShow、afterShow、afterLoad、beforeLoad)来完成此操作。

这是我目前拥有的:

 $(".fancybox").fancybox({
          helpers: {
            overlay: {
              locked: false
            }
          }, 
          beforeShow: function(){
            if($('.fancybox-image').length>0){
              console.log($('.fancybox-image').attr('src'));
              clearCacheImages('fancybox');
            }
          }
        });

    function clearCacheImages(source){
      if(source == "all"){
        // console.log('loading all images');
        jQuery('img').each(function(){  
          jQuery(this).attr('src',jQuery(this).attr('src')+ '?' + (new Date()).getTime());  
        });  
      }else if(source=="fancybox"){
        // console.log('loading fancybox image: ' + $('.fancybox-image').attr('src'));
        $('.fancybox-image').attr('src',$('.fancybox-image').attr('src')+ '?' + (new Date()).getTime());
      }

    }

当我单击 fancybox 幻灯片中的下一个按钮时，它显示上一张图像而不是第一个图像。有人知道如何以及何时确保 fancybox 图像不被缓存吗？

Answer 1

要始终在 fancybox 中加载非缓存图像，我要做的就是使用 将版本 ?v= 试验参数动态添加到 fancybox href 中>beforeLoad 回调如下:

$(".fancybox").fancybox({
    beforeLoad: function () {
        this.href = this.href + "?v=" + new Date().getTime()
    }
});

这样，fancybox 将始终(重新)加载图像，而不是使用缓存的图像。

参见JSFIDDLE