0

I'm trying to setup picturefill.js to deliver responsive images. When I use the srcset attribute instead of the src attribute to avoid a double download, the default images alt text is consistently showing up before picturefill.js has a chance to have the correct image rendered.

<!DOCTYPE html>
<html lang="en">
    <head>
        <script>document.createElement( "picuture" );</script>
        <script async src="js/picturefill.min.js"></script>
    </head>
    <body>   
        <picture>
            <source srcset="desktop.jpg" media="(min-width: 768px)">                        
            <img srcset="mobile.jpg" alt="...">
        </picture>
    </body>
</html>

I'm just wondering if this is a known issue and whether there's a workaround. Only 1 of 3 devices I've tested on that don't fully support the picture element (they get the double download, if I use the src attribute) doesn't display the alt text with the srcset attribute; namely, my speedy iPhone 6; my slower iPhone 4 and iPad 1 display the alt text, and am just wondering if it's simply the speed of the device that'll make it look like it's NOT displaying.

The only real drawback I've seen people talk about regarding the use of picturefill.js is in regards to leaving out the src attribute to avoid the double download, leaving those without javascript the default images alt text -- nothing regarding the temp. rendering of the alt text while the scripting is finishing, which almost seems just as bad or worse than the double download.

Kevin
  • 335
  • 4
  • 17
  • what else should it show before it can show the image? you can use – dandavis Jan 09 '16 at 01:25
  • @dandavis I don't know, I guess I assumed the polyfill would prevent the alt text from appearing for those with javascrapt enabled. Wouldn't a – Kevin Jan 09 '16 at 02:20
  • would let you use an old-fashioned tag without bogging down modern clients. you can probably do something like `img:not([src]){opacity:0;}` to hide the alt text during loading... – dandavis Jan 09 '16 at 02:32
  • I'd suggest filing an issue at https://github.com/scottjehl/picturefill/issues – zcorpan Jan 11 '16 at 12:53
  • @dandavis `img:not([src]){opacity:0;}` works but then my image isn't rendering on Chrome. – Kevin Jan 11 '16 at 17:57
  • @zcorpan Yeah, I wasn't sure if it was a real issue. It seems to make sense that a browser would render the alt text on an image with invalid markup, but it doesn't seem to make a difference loading picturefill.js without the `async` attribute to give the script time to do its thing. It also wouldn't be that big of a deal if the image I'm trying to load wasn't my sites main banner. – Kevin Jan 11 '16 at 18:03

0 Answers0