流沙：高速缓存图像在Chrome

排序

第一次访问我的projects page和过滤结果一切正常。但出于某种原因，在Chrome中，当我第二次过滤所有图像时（它将不透明度设置为0）。

我似乎无法揣摩出它这样做的，它只会发生在Chrome的事实使得它是更加混乱。

这里是jQuery的codeJquery：

if (jQuery().quicksand) { 

    (function($) { 

     $.fn.sorted = function(customOptions) { 
      var options = { 
       reversed: false, 
       by: function(a) { 
        return a.text(); 
       } 
      }; 

      $.extend(options, customOptions); 

      $data = jQuery(this); 
      arr = $data.get(); 
      arr.sort(function(a, b) { 

       var valA = options.by($(a)); 
       var valB = options.by($(b)); 

       if (options.reversed) { 
        return (valA < valB) ? 1 : (valA > valB) ? -1 : 0;    
       } else {   
        return (valA < valB) ? -1 : (valA > valB) ? 1 : 0; 
       } 

      }); 

      return $(arr); 

     }; 

    })(jQuery); 

    jQuery(function() { 

     var read_button = function(class_names) { 

      var r = { 
       selected: false, 
       type: 0 
      }; 

      for (var i=0; i < class_names.length; i++) { 

       if (class_names[i].indexOf('selected-') == 0) { 
        r.selected = true; 
       } 

       if (class_names[i].indexOf('segment-') == 0) { 
        r.segment = class_names[i].split('-')[1]; 
       } 
      }; 

      return r; 

     }; 

     var determine_sort = function($buttons) { 
      var $selected = $buttons.parent().filter('[class*="selected"]'); 
      return $selected.find('a').attr('data-value'); 
     }; 

     var determine_kind = function($buttons) { 
      var $selected = $buttons.parent().filter('[class*="selected"]'); 
      return $selected.find('a').attr('data-value'); 
     }; 

     var $preferences = { 
      duration: 500, 
      adjustHeight: 'auto' 
     } 

     var $list = jQuery('#items'); 
     var $data = $list.clone(); 

     var $controls = jQuery('.selector'); 

     $controls.each(function(i) { 

      var $control = jQuery(this); 
      var $buttons = $control.find('a'); 

      $buttons.bind('click', function(e) { 

       var $button = jQuery(this); 
       var $button_container = $button.parent(); 
       var button_properties = read_button($button_container.attr('class').split(' '));  
       var selected = button_properties.selected; 
       var button_segment = button_properties.segment; 

       if (!selected) { 

        $buttons.parent().removeClass(); 
        $button_container.addClass('selected'); 

        var sorting_type = determine_sort($controls.eq(1).find('a')); 
        var sorting_kind = determine_kind($controls.eq(0).find('a')); 

        if (sorting_kind == 'all') { 
         var $filtered_data = $data.find('li'); 
        } else { 
         var $filtered_data = $data.find('li.' + sorting_kind); 
        } 

        var $sorted_data = $filtered_data.sorted({ 
         by: function(v) { 
          return $(v).find('strong').text().toLowerCase(); 
         } 
        }); 

        $list.quicksand($sorted_data, $preferences, function(){ $("a[rel^='prettyPhoto']").prettyPhoto(); }); 

       } 

       e.preventDefault(); 

      }); 

     }); 

    }); 

}

HTML 下面是我用我的页面上的HTML。我一遍又一遍地看了一遍，一切都很好。

<ul class="selector"> 

     <li><a data-value="all" href="#">All</a></li> 
     <li><a data-value="web" href="#">Web</a></li> 
     <li><a data-value="print" href="#">Print</a></li> 

     <li><a data-value="uni" href="#">University Projects</a></li> 

    </ul> 

    <div class="clear"> </div> 

    <ul id="items" class="glow gallery"> 

     <!-- Villas on great bay -->       
     <li data-id="id1" class="web"> 

      <a class="group" href="#thevillas"><img src="images/projects/thevillas/thumb.jpg" alt="Website: The Villas on Great Bay" /></a> 
      <p>The Villas on Great Bay<br /><span>Beachfront Villa Web Page, 2010</span></p> 

     </li> 

     <!-- GEDsxm --> 
     <li data-id="id2" class="web"> 

      <a class="group" href="#GEDsxm"><img src="images/projects/gedsxm/thumb.jpg" alt="Website: GEDsxm.com" /></a> 
      <p>GED SXM<br /><span>Academic Online training Site, 2009</span></p> 

     </li> 

     <!-- Weightlifting --> 
     <li data-id="id3" class="print uni"> 

      <a rel="weightlifting" class="group" title="Logo Design for the new Weightlifting club at FSU" id="single_image" href="images/projects/weightlifting/1.jpg"><img src="images/projects/weightlifting/thumb.jpg" alt="Logo for FSU Weightlifting Club" /></a> 

      <a rel="weightlifting" style="display:none" class="group" title="Logo Design for the new Weightlifting club at FSU" id="single_image" href="images/projects/weightlifting/2.jpg"></a> 

      <p>FSU Weightlifting<br /><span>Logo Design, 2009</span></p> 

     </li> 

     <!-- Sintelligence Logo --> 
     <li data-id="id11" class="print"> 

      <a class="group" title="Sintelligence Logo" href="images/projects/sintel/1.jpg"><img src="images/projects/sintel/thumb.jpg" alt="Sintelligence Logo" /></a> 
      <p>Sintelligenceo<br /><span>Logo Design, 2006</span></p> 

     </li> 

     <!-- Egyptian Night --> 
     <li data-id="id4" class="print uni"> 

      <a class="group" title="Poster for TCC's International Student Services" href="images/projects/egypt/1.jpg"><img src="images/projects/egypt/thumb.jpg" alt="An Egyptian Night Poster" /></a> 
      <p>TCC's Intl. Student Services<br /><span>An Egyptian Night Poster, 2009</span></p> 

     </li> 

     <!-- ISS Magazine Ad --> 
     <li data-id="id5" class="print uni"> 

      <a class="group" title="ISS Magazine Add" href="images/projects/isoad/1.jpg"><img src="images/projects/isoad/thumb.jpg" alt="ISS Magazine Ad" /></a> 
      <p>TCC's Intl. Student Services<br /><span>Featured Magazine Ad, 2009</span></p> 

     </li> 

     <!-- Alacarte ad 1 --> 
     <li data-id="id6" class="print"> 

      <a class="group" title="Kitchens Alacarte Newspaper Add" href="images/projects/alacarte/ad1/1.jpg"><img src="images/projects/alacarte/ad1/thumb.jpg" alt="Alacarte Newspaper Ad" /></a> 
      <p>Kitchens Alacarte<br /><span>Newspaper Ad, 2010</span></p> 

     </li> 

     <!-- Alacarte ad 2 --> 
     <li data-id="id7" class="print"> 

      <a class="group" title="Kitchens Alacarte Newspaper Add v2" href="images/projects/alacarte/ad2/1.jpg"><img src="images/projects/alacarte/ad2/thumb.jpg" alt="Alacarte Newspaper Ad" /></a> 
      <p>Kitchens Alacarte<br /><span>Newspaper Ad, 2010</span></p> 

     </li> 

     <!-- FPSI --> 
     <li data-id="id8" class="print uni"> 

      <a class="group" title="Florida Public Safety Institute Logo Drafts" href="images/projects/fpsi/1.jpg"><img src="images/projects/fpsi/thumb.jpg" alt="FPSI Logo Drafts" /></a> 
      <p>Florida Public Safety Institute<br /><span>Logo Drafts, 2009</span></p> 

     </li> 

     <!-- Helicopter --> 
     <li data-id="id9" class="print"> 

      <a rel="heli" class="group" title="Leeward Islands Helicopters Post Card Front" id="single_image" href="images/projects/helicopter/1.jpg"><img src="images/projects/helicopter/thumb.jpg" alt="Leeward Islands Helicopters Post Card Front" /></a> 

      <a rel="heli" style="display:none" class="group" title="Leeward Island Helicopters Post Card Back" id="single_image" href="images/projects/helicopter/2.jpg"></a> 

      <p>Leeward Islands Helicopters<br /><span>Post Cards, 2009</span></p> 

     </li> 

     <!-- ISS Logo --> 
     <li data-id="id10" class="print uni"> 

      <a class="group" title="International Student Services Logo" href="images/projects/iss/1.jpg"><img src="images/projects/iss/thumb.jpg" alt="ISS Logo" /></a> 
      <p>International Student Services Logo<br /><span>Logo Design, 2010</span></p> 

     </li> 


     <!-- VDL Poster --> 
     <li data-id="id12" class="print"> 

      <a class="group" title="Superbowl Party Poster" href="images/projects/vdl/1.jpg"><img src="images/projects/vdl/thumb.jpg" alt="Superbowl Party Poster" /></a> 
      <p>Superbowl Party Poster<br /><span>Logo Design, 2009</span></p> 

     </li> 
               </li> 


    </ul>

更新时间： 我想这可能有助于补充说，如果我从来没有访问过该网站它工作之前罚款铬的第一次。但刷新后的图像再次消失。

来源

2012-03-24 Jose Browne