0

I have the following JavaScript (jQuery) and HTML structure:

$(function(){
  
  $('source').each(function(){
    console.log('a source element');
  });
  
});
<div class="container">
  <picture>
    <source media="(min-width: 1200px)" srcset="https://via.placeholder.com/300">
    <source media="(min-width: 800px)" srcset="https://via.placeholder.com/150">
    <img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==">
  </picture>
</div>

<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

I realise picture is not supported in IE9 so I'm working on some custom fallback logic. Part of this fallback involves grabbing the srcset attribute from the source tags. However, it doesn't appear that jQuery can select the source elements in IE9 as, when running the example code above, nothing is logged to the console in that browser. Is anyone able to advise how to get jQuery to recognise source elements in IE9 (or whether it's even possible)?

Thanks

-- EDIT

Selecting the picture element is possible, but then selecting $('picture').children() again doesn't work. The source elements are completely ignored. Also tried adding classes to the source elements but again nothing is returned when using those as a selector.

1 Answer 1

0

I am able to produce the issue on my side. After using the F12 developer tools to debug the JavaScript code, it seems that in IE9 mode, we could find the picture elements, but if we check its innerHTML property, we can see it only contains the img tag, not contains the source element, so we can not find it. I will try to submit the feedback regarding this issue.

As we all known, The HTML element specifies multiple media resources for the <picture>, the <audio> element, or the <video> element. I have test that if we change the picture to audio or video elements, then, we could find the source element. So, you could try to use them, instead of using the picture element.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.