最初のロード時にイメージを置き換えるときのキャッシュの問題

Question

キャッシュをクリアするときにページが最初に読み込まれたときに最初のロード時にイメージが表示されないというキャッシングの問題があります。私は画像を提供する外部メディア会社と協力しています。私は一度読み込まれた画像のソースを置き換えるコールバック関数の中に以下のコードを書きました。

これは正しいですか？

$('img').each(function(){ 

    var img = $(this); 

    // AJAX HEAD request to check the larger image file has loaded 
    var img_src_large = img.attr("src").replace("/viewfinder.jpg", "_SMALL.jpg"); 

    $.ajax({ 
     url: img_src_large, 
     type:'HEAD', 
     error: 
      function(){ 
       img.fadeIn("fast"); 
      }, 
     success: 
      function(){ 
       img.attr("src",img_src_large).fadeIn("fast"); 
      } 
    }); 

}); 

Answer 1

これは、キャッシングのために既に読み込まれている画像に「load」イベントを強制的にトリガすることで実現できます。あなたは、あなたが望むロジックでfadeInの部分を置き換えることができます。

$('img').hide().one("load",function(){ 
    $(this).fadeIn(500); 
}).each(function(){ 
    if(this.complete) $(this).trigger("load"); 
}); 

Answer 2

私はこの問題をimg loadで解決しましたが、これは同じ状況で誰かを助けるかもしれません。

// Wrap Thumb Views 
$('#rfxViews img').each(function(){ 

    var img = $(this); // cache selected to variable 

    // Replace the small swatch images 
    var img_src_large = img.attr("src").replace("/viewfinder.jpg", "_SMALL.jpg"); 

    // Set empty source until image has loaded below 
    img.attr("src",""); 

    img.attr('src', img_src_large).hide().load(function(){ 
     $(this).show() 
    }) 

});