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
#92 (comment), 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
#92 (comment), 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?