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事件。