javascript - jQuery 加载并不总是与 Chrome 中的 元素一起触发

Question

我正在使用响应式图像的元素以及不受支持的浏览器的图片填充填充。即使在不受支持的浏览器中，一切也能正常工作。但在支持它的 Chrome 中，我的 jquery load 事件并没有持续触发。这是我的代码:

$("#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。我之前经历过一些场景，一个小的超时就可以解决 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，那么您可以在 img 上使用 onload="mainSlider.init();" 或 $(document) .ready(mainSlider.init).

请注意，当使用 srcset 或 picture 时，您可以在 img 上获取多个 load 事件(当图像更改)。