Jquery Cycle + Firefox Squishing画像

Question

こんにちは、私は画像ギャラリーのjQuery Cycleを実行しています。リンクを表示します。Here

私の問題は、画像がFirefoxで見たときに押しつぶされていることです。この問題は、ページを再ロードすると消えます。これにより、すべての画像がロードされる前にJavascriptがトリガーされていると考えられます（通常、最初の画像はうまく機能し、残りは押しつぶされます）。

ハードリフレッシュで問題が再現されます。

すべてを$（document）.ready（function（）{}）にラップしました。それでも起こります。

追加情報：画像の幅と高さを指定すると、すべて正常に動作します。しかし、サイズの異なる数百の画像があります。

私はこの問題にかなり不満です。どんなアイデアや助けも大歓迎です！ここで

は私のコードです：

$(document).ready(function(){ 
//function onBefore(curr,next,opts) { 
// var $slide = jQuery(next); 
// var w = $slide.outerWidth(); 
// var h = $slide.outerHeight(); 
// $slide.css({ 
//  marginTop: (482 - h)/2, 
//  marginLeft: (560 - w)/2 
// }); 
//}; 

// Decare the function that center the images... 
function onBefore(curr,next,opts) { 
    var $slide = jQuery(next); 
    var w = $slide.outerWidth(); 
    var h = $slide.outerHeight(); 
    $slide.css({ 
     marginTop: (480 - h)/2, 
     marginLeft: (560 - w)/2 
    }); 
}; 


$(document).ready(function() { 
    $('#slideshow').cycle({ 
    fx:  'fade', 
    next: '#next', 
    pause: 0, 
    speed: 500, 
    before: onBefore, 
    prev: '#prev', 
    pause: '#pause', 
    pager: '.thumbs', 
    pagerClick:function(zeroBasedSlideIndex, slideElement) {$(slideElement).find('div.cover').hide();}, 
    pagerAnchorBuilder: function(idx, slide) { 
         var src = $('img',slide).attr('src'); 
         //Change height of thumbnail here 
         return '<li><a href="#"><img src="' + slide.src + '" height="90" /></a></li>'; 

       } 
    });});}); 

Answer 1

数ヶ月前にサイト上で作業しているとき、私は同じ問題を抱えていた（下記にリンク）。 $(document).ready()でサイクルを開始している場合、クライアントがページを参照すると、次のようになります。

1）クライアントのブラウザから各img要素の要求が送信されます。これらの要求には、実行にはさまざまな時間がかかります。

2）イメージリクエストが完了する前に、サイクルが開始されます。 Cycleは、スライドショーの最初の画像以外のすべてを隠すことによって動作します。画像のそれぞれにvisibility:hiddenとdisplay:noneを設定します。

問題はFirefoxが表示スタイルがnoneに設定されている時点で一度、すべてためimg要素のサイズを固定していることです。したがって、画像の読み込みが完了していない場合、その高さと幅のスタイル属性は小さくなります（Firefoxの画像プレースホルダーのサイズなど）。サイクルでスタイル属性をdisplay:blockに設定してイメージを表示すると、非表示になっていたときの寸法が使用されます。

すべての画像のロードが完了するまで、サイクルプラグインを開始しないようにコードを変更してこの問題を解決しました。

var imagesRemaining = 12; // 12 is just the number of images in the slideshow div 

$(document).ready(function() { 
    $('#slideshow > img').bind('load', function(e) { 
     imagesRemaining = imagesRemaining - 1; 
     if (imagesRemaining == 0) { 
      // I'm doing some other stuff when initializing cycle 
      startCycle(); 
      // My images all start with visibility:hidden so they don't show 
      // before cycle hides them in a 'stack', so ... 
      $('#slideshow > img').css('visibility', 'visible'); 
     } 
    }); 
}); 

function onBefore(curr, next, opts) { // Your code here ... } 

function startCycle() { 
    $('#slideshow').cycle({ ... // your initialization here }); 
} 

あなたがでthis site上のギャラリーを見ることで、アクションでそれを見ることができます。これを行うには、私は、このように各画像にloadイベントをバインドし、私は自転車だ画像の数にカウンタ変数を初期化しますFirefox。私はギャラリーページを動的に構築していますので、あなたのページとは多少異なる構造になっていますが、Firebugを使って詳細を見ることができます。

Answer 2

また、この問題を解決する幅と高さの属性が追加されているようです。

Answer 3

データベースを使用してスライドショーを作成する場合は、画像自体から画像寸法にアクセスすることができます。

例えば

、使用ジャンゴあなたのimgタグに

width="{{ xxx.image.width }}px" height="{{ xxx.image.height }}px" 

を使用することができます。

Answer 4

[OK]を私は負荷を呼び出して、おそらくawfull方法を知っているが、私はちょうど私が内部の全サイクルの初期化子と呼ばれるそれはちょうどそう動作しない何らかの理由で.LOADために私のサイクルコードをバインドcoulnd ...

私は...いくつかのそのおそらく欠陥が私としてdesperatedものとするために延びるが

Answer 5

ジョシュを

を私は、動的画像を含むリチウムを巡回していますので、サイズを強制し、データができませんでした、あなたのソリューションは、ちょうど持って私に頭痛を救った、ありがとう！

イメージの総数が分からないページを処理するために少し修正したと思います。それは私のためにうまくいっているようだ、もし誰かが欠陥を見ることができるなら、それらを指摘してください - 私はまだ学んでいます。私はすでに提案されているものよりも、この問題は解決するために使用はるかに単純でクリーンソリューションがあり

$(document).ready(function() { 
    $('#slideshow > img').each(
     function go() { 
      $(this).bind('load', function (e) { 
       projects(); 
       $('#slideshow > img').css('visibility', 'visible'); 
      }); 
     }); 
    }); 

function projects() { 
    $('#slideshow').cycle({ 
     fx: 'scrollHorz', 
     speed: 300, 
     timeout: 0, 
     next: '#next ', 
     prev: '#prev ', 
     after: onAfter, 
     nowrap: 1, 
     autostop: 1 
    }); 
} 

Answer 6

：jQueryのを使用して

は、あなたの特定の状況のた​​め$(window).loadの代わり$(document).readyを使用する必要があります。これに

$(document).ready(function() { 
    $('#slideshow').cycle({ 
    /* ... */ 
    }); 
}); 

：問題を修正するには、これを変更

$(window).load(function() { 
    $('#slideshow').cycle({ 
    /* ... */ 
    }); 
}); 

なぜこの仕事はしますか？ window.onloadは、ページ上のすべての参照画像がロードされた後に起動されるため（状況および.load() - jQuery APIを参照）、これが目的の動作です。 $(document).readyは、「DOM Ready」として知られていますが、イメージがロードされる前に起動します。これは通常、望ましい動作ですが、状況によっては早すぎます。

Answer 7

youtubeビデオを反応させるのと同様のソリューションを使用できます。あなたはあなたの幅と高さの比を知る必要があり、それをパディングボトムとしてサイクリング部門に追加する必要があります。私1024X680の写真のために、私はあなたのケースでは1024分の680 = 66.4パーセント

を使用し、私は

#slideshow{ padding-bottom:66.4%; } は、画像未収縮が表示されます信じています。実際の高さと幅の値がどのようなものなのか分かりませんので、自分で置き換えてください。 $（window）.loadソリューションが驚異的に無効であることが証明されたとき、このソリューションを使用しなければなりませんでした。

これは、流体の応答性の高い環境にスライドするため、画像の寸法を設定するよりも優れています。