1

我正在使用该元素来响应图像，并为不受支持的浏览器使用图片填充 polyfill。即使在不受支持的浏览器中也一切正常。但是在支持它的 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，但为了保存，我给了它 10 毫秒。在小超时解决 chrome 问题之前，我已经经历过一些场景。

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

1 回答 1

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

于 2015-04-17T07:52:20.683 回答