1

サポートされていないブラウザー用のピクチャーフィルポリフィルを使用して、レスポンシブ画像用の要素を使用しています。サポートされていないブラウザでもすべて正常に動作します。しかし、それがサポートされているクロムでは、私のjqueryロードイベントは一貫して発火していません。私のコードは次のとおりです。

$("#banner .banner-slide a img").load(mainSlider.init)

そして私の絵の要素:

<picture>
    <!--[if IE 9]><video style="display: none;"><![endif]-->
    <source srcset="http://placehold.it/1920x300" media="(min-width: 1440px)" />
    <source srcset="http://placehold.it/1440x300" media="(min-width: 1024px)" />
    <source srcset="http://placehold.it/1024x250" media="(min-width: 640px)" />
    <source srcset="http://placehold.it/640x150" media="(min-width: 481px)" />
    <source srcset="http://placehold.it/480x150" media="(max-width: 480px)" />
    <!--[if IE 9]></video><![endif]-->
    <img srcset="http://placehold.it/1440x300" alt="" />
</picture>

クロムで正しく動作させるために何ができるかについて何か考えはありますか?

修理済み

取引が何であるかはよくわかりませんが、負荷リスナーの下に追加すると修正されました。setTimeout が 0 の場合でも機能しましたが、保存するために 10ms を指定しました。小さなタイムアウトがクロムの問題を解決する前に、いくつかのシナリオを経験しました。

//Fix chrome bug
setTimeout(function () {
    $(window).resize();
}, 10)
4

1 に答える 1