jQuery負載並非總是觸發 <picture> Chrome中的元素

Question

我正在使用元素將響應性圖像與picturefill polyfill一起用於不受支持的瀏覽器。 即使在不受支持的瀏覽器中，一切都可以正常工作。 但是在支持Chrome的Chrome中，我的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>

關於我可以做什么使其在chrome中正常工作的任何想法嗎？

固定

不太確定這筆交易是什么，但在負載偵聽器下面添加以下內容可以解決該問題。 即使將setTimeout設置為0也可以，但為了節省，我給了它10ms。 Ive經歷了一些情況，在此之前一個小的超時可以解決chrome問題。

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

Answer 1

我的猜測是，有時會在設置偵聽器之前觸發load事件。 然后您錯過了該事件，並且什么都沒有發生。 這可以在任何瀏覽器中發生。

為了解決這個問題，您可以使用捕獲事件偵聽器，盡管舊版本的IE不支持。

document.addEventListener('load', function(e) {
    if (e.target === $("#banner .banner-slide a img")[0]) {
        mainSlider.init();
    }
}, true);

如果您需要支持舊版IE，則可以使用onload="mainSlider.init();" 在img或$(document).ready(mainSlider.init) 。

請注意，使用srcset或picture （當圖像更改時），可以在img上獲得多個load事件。