fancybox 确保 fancybox-image 不被缓存答案

【问题标题】：fancybox ensure fancybox-image isn't cachedfancybox 确保 fancybox-image 不被缓存
【发布时间】：2014-09-09 19:44:45
【问题描述】：

我遇到了 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 图像？

【问题讨论】：

标签： javascript jquery image caching fancybox-2

【解决方案1】：

我要始终在fancybox 中加载非缓存图像的方法是使用beforeLoad 回调将版本?v= 试用参数动态添加到fancybox href：

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

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

见JSFIDDLE

【讨论】：

是的，这正是我需要的，谢谢！我错过了 this.href 元素。