jQuery加载并不总是以<图片>元素

jQuery load not always firing with <picture> element in Chrome

本文关键字：lt gt 元素 图片 加载 jQuery      更新时间：2023-09-26

对于不受支持的浏览器，我使用picturefill 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也有效，但为了保存，我给了它10ms。我以前经历过一些场景，其中一个小的超时解决了chrome的问题。

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

我的猜测是，有时load事件在设置侦听器之前就被触发了。然后你错过了活动，什么也没发生。这种情况在任何浏览器中都可能发生。

要解决此问题，您可以使用捕获事件侦听器，尽管旧版本的IE不支持此功能。

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

如果您需要支持旧的IE，那么您可以在img或$(document).ready(mainSlider.init)上使用onload="mainSlider.init();"。

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

相关文章：