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 中加载非缓存图像，我会做的是使用 向 fancybox href 动态添加版本 ?v= 试验参数>beforeLoad 回调如下:

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

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

参见 JSFIDDLE