javascript - jQuery サイクル プラグインが (しばしば) Google Chrome で動作しない

Question

何らかの理由で、最近作成したページに初めてアクセスしたときに、jQuery Cycle プラグインが機能しません。サイトはここにあります(サイトは別の言語 [ヘブライ語] です)。

言語に関係なく、Cycle プラグインは Firefox と IE で正常に動作します。これは私の側のバグなのか、プラグイン側のバグなのか疑問に思っています。

それが私の側のバグである場合、どうすれば修正できますか?

Answer 1

この問題の解決策は、Google Chrome が動的に生成された div の高さを適切にレンダリングできないという事実に基づいて (@ulima69 が観察したように) .slideshow、画像と一致する指定された幅と高さをラッピング div ()に与えることです。 ' 幅高さ。

これにより、今のところバグが修正されます。画像がすべて異なる次元である場合は、より複雑なソリューションを探す必要があります。@ulima69 は、Chrome で動作する代替サイクル プラグインへの 2 つのリンクを提供しました。あなたのために働くことをしてください。

アミット

Answer 2

ページに画像をロードできるようにするには、.ready の代わりに .load を使用する必要があります。

$(window).load(function() {
    $('.element').cycle();
});

Answer 3

これがあなたのための簡単なデモです：http：//jsfiddle.net/VpnPb/4/。私はjQuery1.6.4を使用しましたが、さまざまな画像サイズですべてが正常に機能します。

$('#s5').cycle({
  fx: 'fade',
  pause: 1
});

$('#s6').cycle({
  fx: 'scrollDown',
  random: 1
});

.pics {
  height: 232px;
  width: 232px;
  padding: 0;
  margin: 0;
}

.pics img {
  padding: 15px;
  border: 1px solid #ccc;
  background-color: #eee;
  width: 200px;
  height: 200px;
  top: 0;
  left: 0
}

<link href="http://jquery.malsup.com/cycle/cycle.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script src="http://malsup.github.io/jquery.cycle.all.js"></script>
<script src="http://malsup.github.io/chili-1.7.pack.js"></script>

<div id="s5" class="pics">
  <img src="http://desmond.yfrog.com/Himg735/scaled.php?server=735&filename=u2tc.jpg&res=iphone" width="200" height="200" />
  <img src="http://desmond.yfrog.com/Himg611/scaled.php?server=611&filename=ei41.jpg&res=iphone" width="200" height="200" />
  <img src="http://desmond.yfrog.com/Himg616/scaled.php?server=616&filename=2113.jpg&res=iphone" width="200" height="200" />
</div>
<br/>

<div id="s6" class="pics">
  <img src="http://desmond.yfrog.com/Himg735/scaled.php?server=735&filename=u2tc.jpg&res=iphone" width="200" height="200" />
  <img src="http://desmond.yfrog.com/Himg611/scaled.php?server=611&filename=ei41.jpg&res=iphone" width="200" height="200" />
  <img src="http://desmond.yfrog.com/Himg616/scaled.php?server=616&filename=2113.jpg&res=iphone" width="200" height="200" />
</div>