jQuery로드가 항상 <picture> (Chrome의 요소)로 실행되지 않는 경우

Question

지원되지 않는 브라우저의 경우 채움 형 polyfill로 반응 형 이미지에 요소를 사용하고 있습니다. 지원되지 않는 브라우저에서도 모든 것이 제대로 작동합니다. 하지만 크롬이 지원되는 곳에서는 jquery로드 이벤트가 지속적으로 실행되지 않습니다. Heres는 내 코드 :

$("#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> 

내가 그것을 크롬에서 제대로 작동하도록하기 위해 무엇을 할 수 있는지에 관해서는 어떤 생각?

고정

너무 확실하지 무엇을 거래했지만 그것을 고정 부하 청취자 아래를 추가. 심지어 0의 setTimeout 일했지만 저장하려면 10ms 준. 작은 시간 제한으로 크롬 문제를 해결하기 전에 몇 가지 시나리오를 경험했습니다.

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

Answer 1

청취자가 설정되기 전에 가끔 load 이벤트가 발생하는 것 같습니다. 그런 다음 이벤트를 놓치고 아무 일도 일어나지 않습니다. 이는 모든 브라우저에서 발생할 수 있습니다.

이전 버전의 IE에서는 지원되지 않지만 캡쳐 이벤트 수신기를 사용할 수 있습니다. 당신은 오래된 IE를 지원해야하는 경우

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

다음은 img 아니면 $(document).ready(mainSlider.init)에 onload="mainSlider.init();"를 사용할 수 있습니다. srcset 또는 picture (때 이미지 변경)를 사용할 때 당신은 img 여러 load 이벤트를 얻을 수

참고.