Question

我正在使用带有图片填充polyfill的响应式图像元素用于不支持的浏览器。即使在不受支持的浏览器中，一切正常。但是在支持它的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，则可以使用onload="mainSlider.init();"或img上的$(document).ready(mainSlider.init)。

请注意，使用load或img时（图片更改时），您可以在srcset上获得多个picture个活动。

jQuery加载并不总是使用Chrome </picture>中的<picture>元素触发

1 个答案: