0

数日前、サイトの画像の幅と長さの属性をパーセンテージに設定したときに、画像が思ったとおりに縮小されなかったのはなぜだろうと思っていました。

問題は、画像を縮小したかったのですが、実際には画像のコンテナを縮小していました。

とにかく、私は実際には、jQueryのスニペットを使用して画像のサイズを変更するというPatの提案が好きでした。なぜなら、ファンシーボックスのクラスを持つすべての画像、つまり、クリックすると、ファンシーボックス効果を表示します。

しかし、どういうわけか、それは一種の厄介な振る舞いをしています。

私のページで問題を表示できるようにブラウザをポイントすると、http：//www.marioplanet.com/product.htmで問題が発生する可能性があります。

デバッグを支援するために以前に私のサイトにアクセスしたことがある場合は、最初のアクセス時にのみ問題が発生するように見えるため、必ず私のサイトのCookieを削除し、キャッシュを空にしてください。

問題はブラウザによって異なるようです。

Firefox（3.6.8）およびIE（8）：太字のテキストの下にある「CategoryPlush」では、画像のサイズを適切に変更する必要があります。

Chrome（5.0.375.125）とSafari（5）：画像があるべき同じ太字のテキストの下には、輪郭が描かれた2つの正方形だけがあり、他には何もありません。

コードを更新しない限り私が見つけた「修正」は次のように見えます。

Firefox（3.6.8）およびIE（8）：簡単な更新で、画像は最初にアクセスしたときのサイズに戻ります。

Chrome（5.0.375.125）とSafari（5）：これら2つのブラウザーをURL http://www.marioplanet.com/product.htm#にポイントすると、ポンド記号（＃）を追加するか、クリックして簡単に実行できます。 「FollowUsOn」ソーシャルネットワーキングトレイのYouTubeアイコンでは、画像は最初のアクセス時に希望するサイズになります。

そのため、jQueryスニペットに関しては、おそらく.width（）アクションは広くサポートされておらず、グーグルは結果をもたらさず、主要なブラウザー全体でうまく機能しないのは意味がないと考えていました。

そのため、おそらくjQueryのスニペットが$（document）.readyイベントハンドラーに含まれていなかったため、DOM、つまり画像が適切に読み込まれていなかったのではないかと考えていました。私のコードを調べたところ、すべて問題ないように見えました。

最後に、画像に残っているサイズがjQueryのサイズ変更を台無しにして、すべてが再び問題ないように見えたのではないかと思っていましたが、おそらくそれはテーブルとテーブルの行とセルの幅に関係していますか？

問題が何であるかについての提案やアイデアは大歓迎です!!

ありがとう！

4

1 に答える 1

1

問題は確かに$(document).readyハンドラーです。これを実行すると、DOMの準備が整い、イメージが準備できていない可能性があり、おそらく最初のロードでは実行されません。リロードで機能する理由は、画像がキャッシュされているため、即座にロードされます。

ただし、次のようにイベントを$(document).ready使用する代わりに、これを簡単に修正できます。window.onload

$(window).load(function() {
  //code that needs images
});

主な違いは、画像の読み込み後onloadに実行されるため、の代わりに正しい値が表示されることです。.width()0

于 2010-08-08T16:00:05.827 に答える