Multiple image sources problem

[stalinkay]

I'm having trouble getting this to work correctly. I also want to use .webp but it's always loading the default image. If I remove the src attribute the class becomes b-error. How can I get it to work correctly?

<div class="embed-responsive embed-responsive-21by9">
                <picture>
                    <!-- webp images -->
                    <source type="image/webp" data-srcset="images/nwr/national-parks/etosha-national-park/dolomite/dolomite/24-dolomite-lg.webp, images/nwr/national-parks/etosha-national-park/dolomite/dolomite/24-dolomite-lg-2x.webp 2x" media="(max-width: 74.9em)">
                    <source type="image/webp" data-srcset="images/nwr/national-parks/etosha-national-park/dolomite/dolomite/24-dolomite-md.webp, images/nwr/national-parks/etosha-national-park/dolomite/dolomite/24-dolomite-md-2x.webp 2x" media="(max-width: 61.9em)">
                    <source type="image/webp" data-srcset="images/nwr/national-parks/etosha-national-park/dolomite/dolomite/24-dolomite-sm.webp, images/nwr/national-parks/etosha-national-park/dolomite/dolomite/24-dolomite-sm-2x.webp 2x" media="(max-width: 47.9em)">
                    <source type="image/webp" data-srcset="images/nwr/national-parks/etosha-national-park/dolomite/dolomite/24-dolomite-xs.webp, images/nwr/national-parks/etosha-national-park/dolomite/dolomite/24-dolomite-xs-2x.webp 2x" media="(max-width: 33.9em)">

                    <!-- jpeg images -->

                    <!--[if IE 9]><video style="display: none;"><![endif]-->
                    <source data-srcset="images/nwr/national-parks/etosha-national-park/dolomite/dolomite/24-dolomite-lg.jpg, images/nwr/national-parks/etosha-national-park/dolomite/dolomite/24-dolomite-lg-2x.jpg 2x" media="(max-width: 74.9em)">
                    <source data-srcset="images/nwr/national-parks/etosha-national-park/dolomite/dolomite/24-dolomite-md.jpg, images/nwr/national-parks/etosha-national-park/dolomite/dolomite/24-dolomite-md-2x.jpg 2x" media="(max-width: 61.9em)">
                    <source data-srcset="images/nwr/national-parks/etosha-national-park/dolomite/dolomite/24-dolomite-sm.jpg, images/nwr/national-parks/etosha-national-park/dolomite/dolomite/24-dolomite-sm-2x.jpg 2x" media="(max-width: 47.9em)">
                    <source data-srcset="images/nwr/national-parks/etosha-national-park/dolomite/dolomite/24-dolomite-xs.jpg, images/nwr/national-parks/etosha-national-park/dolomite/dolomite/24-dolomite-xs-2x.jpg 2x" media="(max-width: 33.9em)">
                    <!--[if IE 9]></video><![endif]-->
                    <img class="b-lazy" src="images/nwr/national-parks/etosha-national-park/dolomite/dolomite/24-dolomite-xs.jpg" data-src="images/nwr/national-parks/etosha-national-park/dolomite/dolomite/24-dolomite-lg.jpg|images/nwr/national-parks/etosha-national-park/dolomite/dolomite/24-dolomite-lg-2x.jpg" alt="Dolomite">
                </picture>
            </div>

[tortilaman]

I'm also having issues using picture elements. Does it work if you only have jpegs?

[dinbror]

Hey @stalinkay, @tortilaman & @idoshamun

You only have this issue in safari, right? It works fine in chrome, firefox etc?

[idoshamun]

I've tested it in Chrome when I reported. In Safari due to partial support in picture element I use only img with srcset.

On Sun, Oct 9, 2016, 17:36 dinbror notifications@github.com wrote:

Hey @stalinkay https://github.com/stalinkay, @tortilaman https://github.com/tortilaman & @idoshamun https://github.com/idoshamun

You only have this issue in safari, right? It works fine in chrome, firefox etc?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/dinbror/blazy/issues/92#issuecomment-252490001, or mute the thread https://github.com/notifications/unsubscribe-auth/AB5qHbzGah0EC8ZIwxNUCiKfqGDsKhDvks5qyPv4gaJpZM4Ie08j .

[dinbror]

@idoshamun

Did you also test with just jpegs? When I look at my examples page in chrome it shows a non fallback/default image: http://dinbror.dk/blazy/examples/ (example 1.5).

I know it makes two image requests

[idoshamun]

I haven't test with just jpegs but in my use case it shows the right image but my problem is the two requests as you said. I've already created a PR to solve this for the picture case, please refer to #108

[stratboy]

Kind of same issue here. In my case, it always loads the default image. I'm using jpg. And i've tested the same html without blazy and data-attributes and it works correctly. I'm on latest firefox.

Anyway, I report the code (really bare bones):

var slides_blazy = new Blazy({
  offset:1100
  ,container: '.home-slides-box'
  ,loadInvisible: true
});

<picture>
<source media="(max-width: 640px)" data-srcset="img1.jpg">
<source media="(max-width: 830px)" data-srcset="img2.jpg">
<img class="b-lazy" data-src="img2.jpg />
</picture>

[dinbror]

@idoshamun Ok thanks. Was unsure if some of you guys also had issues where it only loaded the fallback image. I'll implement a fix soon. Your PR still need to implement the success callback. No big deal but I want to avoid the redundancy of it.

@stratboy So it loads two images, the fallback and image 1 or 2 depending on screen resolution or do you always only get the default image? The multiple requests I know and will implement a fix soon.

[idoshamun]

Great! Waiting for the fix, I use my fork meanwhile

On Mon, Oct 10, 2016, 23:04 dinbror notifications@github.com wrote:

@idoshamun https://github.com/idoshamun Ok thanks. Was unsure if some of you guys also had issues where it only loaded the fallback image. I'll implement a fix soon. Your PR still need to implement the success callback. No big deal but I want to avoid the redundancy of it.

@stratboy https://github.com/stratboy So it loads two images, the fallback and image 1 or 2 depending on screen resolution or do you always only get the default image? The multiple requests I know and will implement a fix soon.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/dinbror/blazy/issues/92#issuecomment-252731805, or mute the thread https://github.com/notifications/unsubscribe-auth/AB5qHXVuSxF_AsuytxyvOBFIt2v_Ikm6ks5qypppgaJpZM4Ie08j .

[dinbror]

Fixed in v. 1.7.0.

[stratboy]

@dinbror In my case it shows ONLY the default one.

[dinbror]

@stratboy

Hmm ok that's odd. I only have the issue in safari. In latest chrome and firefox it is working fine. What image do you see on my examples page, example 1.5?

http://dinbror.dk/blazy/examples/

[stratboy]

@dinbror Hey you are blazing fast in answering ;) Honestly, I see the right ones, they correctly change based on media queries (default, min-465, min-650). So maybe there's something wrong on my code, I know, but the very strange thing is that, as I wrote, if I take away the data- piece of string (so srcset="img1.jpg" instead of data-srcset="img1.jpg") and deactivate blazy (so no js), all is working fine. In other words, for the browser itself the html code is just fine and works.

[dinbror]

@stratboy

Really odd. Do you have a live example?

[stratboy]

@dinbror I'm trying to build a jsfiddle but having some trouble with external resources. I cannot post the website staging url here, is there a way to private-message? I also created a video but then found out that we cannot attach videos..

[dinbror]

Hey @stratboy

The first link gives me 404 on blazy:

Failed to load resource: the server responded with a status of 404 (Not Found) -> http://www.reghellin.com/js/blazy.js 
index.html:56 Uncaught ReferenceError: Blazy is not defined

But try changing this:

<picture>
   <source media="(max-width: 640px)" data-srcset="images/small/1.jpg">
   <source media="(max-width: 830px)" data-srcset="images/1.jpg">
   <img class="b-lazy" src="images/1.jpg">
</picture>

to

<picture>
   <source media="(max-width: 640px)" data-srcset="images/small/1.jpg">
   <source media="(max-width: 830px)" data-srcset="images/1.jpg">
   <img class="b-lazy" data-src="images/1.jpg">
</picture>

[christopherwiegel]

@stratboy Add an alt attribute to the img-tag (not empty).

@dinbror

Hmm ok that's odd. I only have the issue in safari. In latest chrome and firefox it is working fine. What image do you see on my examples page, example 1.5? http://dinbror.dk/blazy/examples/

I have the same issue in safari and internet explorer. Any idea for a bug fix or workaround?

[stratboy]

christopherwiegel: ok, but is the alt attribute all about with a preload task? Also, if anyway the whole thing is not going to work with safari and explorer, probably on a production website the best thing is to still use the legacy old way right?

[dinbror]

I'll look into a fix

[dinbror]

@stratboy what do you mean with "still use the legacy old way right"

[dinbror]

Fixed in v. 1.7.1

[stratboy]

Ok I confirm it's working properly even in firefox (at least latest). Thank you!

[stratboy]

No, it doesn't work at least in IE11. So using the picture element it's not a shim and not a viable alternative to the legacy blazy's 'breakpoints' option. You probably should not mark that option as obsolete until the other solutions are fully crossbrowser (in other words, until blazy will act a real shim/polyfill).

[stratboy]

Also, as per the the responsive images community group, you probably should enforce the use of srcset on the img tag instead of src > that's the main reason you had the double-loading probled I guess.

Please see the gothas here: https://github.com/scottjehl/picturefill

https://scottjehl.github.io/picturefill/ https://responsiveimages.org/

[dinbror]

Hey @stratboy

What version of blazy are you using when you test in IE 11? V. 1.7.1 works fine in IE11, but v.1.8 doesn't. Will send out a fix later

[stratboy]

Hi, yes, I'm using v1.8

dinbror ha scritto:

Hey @stratboy https://github.com/stratboy

What version of blazy are you using when you test in IE 11? V. 1.7.1 works fine in IE11, but v.1.8 doesn't. Will send out a fix later

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/dinbror/blazy/issues/92#issuecomment-255079795, or mute the thread https://github.com/notifications/unsubscribe-auth/AAatXilgbre5B-V4mH8VNt_TfnuT3WeFks5q10_LgaJpZM4Ie08j.

[dinbror]

Hey @stratboy

Could you please try v. 1.8.1

[yvmarques]

Hello,

Sorry to reopen this issue, but it seems that we have the bug again on IE11.

If I visit this page: http://dinbror.dk/blazy/examples/ with IE11 on the example with multiple sources, it only displays the default image and don't consider the source tags.

See attachment:

Edit: I am using the Blazy version 1.8.2

[dinbror]

Hi @yvmarques

The picture element isn't supported in IE11 or in IE at all. You need to use a polyfill if you want support

[yvmarques]

I forgot to mention that I am using the picturefill 3.0.2 as well.

[tjwelde]

We currently have the same issue

[tjwelde]

I also opened up a new issue for this: https://github.com/dinbror/blazy/issues/140