jQueryを使用した画像のスケーリング - ブラウザキャッシュの変更

Question

問題の動作を確認するには、this linkをクリックします。次に、this oneをクリックします。どのようにイメージが押しつぶされていることに注目してください（あなたはそれを見るためにページャを通してaをクリックしなければならないかもしれません）。

私はそれがブラウザのキャッシュのためだと思います。ここで仕事をしてジャバスクリプトです：

$("#grid_slider").slider({ 
    value: 50, 
    max: 100, 
    min: 10, 
    slide: function(event, ui) { 
     $('ul#grid li').css('font-size',ui.value+"px"); 
    } 
}); 

$("ul#grid li img").each(function() { 
    var width = $(this).width()/125 + "em"; 
    var height = $(this).height()/125 + "em"; 
    $(this).css("width",width); 
    $(this).css("height",height); 
}); 

私はあなたが問題を再現することができます願っています。これを修正するために何をする必要があるのか​​分かりません...機能をすべて一緒に取り出すことを考えていました。前もって感謝します。

Answer 1

あなたが説明している問題があります。私はそれが実際にはブラウザのキャッシュだとは思っていませんが、ロード時間は...私はいくつかの他のサイトでも問題を見てきました。

主な問題は、それはそれが何であるかを知っている前にブラウザが$(document).readyに...あなたのスクリプト火災を画像の大きさを要求されていることですが、$("ul#grid li img")は、完全にロードされる前にそれはあるかもしれないと思われるいくつかの画像$("ul#grid li img").width()ためそう知られていないかもしれません...

多分これを代わりに使用して、役立つかどうかを確認してください。 （スイッチ$().load用$().each）

$("ul#grid li img").load(function() { 
    var width = $(this).width()/125 + "em"; 
    var height = $(this).height()/125 + "em"; 
    $(this).css("width",width); 
    $(this).css("height",height); 
}) 

（完全に推測、しかし...）

補遺：ちょうど今ロード機能にjQueryのヘルプを読んで、ために実行されないことが表示されますこれが呼び出された時点ですでに読み込まれているもの...だから、両方とも行う必要があるかもしれません（$().eachと設定して$().loadを設定してください）...