Multiple image sources problem

Question

Multiple image sources problem

stalinkay opened this issue 9 years ago · 31 comments

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>

Answer 1 · 2016-08-25T23:33:19.000Z

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

Answer 2 · 2016-10-09T14:36:38.000Z

Hey @stalinkay, @tortilaman & @idoshamun

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

Answer 3 · 2016-10-09T14:54:36.000Z

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
.

Answer 4 · 2016-10-09T17:44:25.000Z

@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

Answer 5 · 2016-10-09T19:19:10.000Z

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

Answer 6 · 2016-10-10T13:43:04.000Z

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>

Answer 7 · 2016-10-10T20:04:55.000Z

@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.

Answer 8 · 2016-10-10T20:06:53.000Z

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
.

Answer 9 · 2016-10-10T21:28:24.000Z

Fixed in v. 1.7.0.

Answer 10 · 2016-10-11T07:03:41.000Z

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

Answer 11 · 2016-10-11T07:37:49.000Z

@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/

Answer 12 · 2016-10-11T07:46:10.000Z

@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.

Answer 13 · 2016-10-11T08:09:24.000Z

@stratboy

Really odd. Do you have a live example?

Answer 14 · 2016-10-11T08:15:34.000Z

@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..

Answer 15 · 2016-10-12T16:55:15.000Z

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>

Answer 16 · 2016-10-13T21:53:25.000Z

@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?

Answer 17 · 2016-10-14T07:32:27.000Z

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?

Answer 18 · 2016-10-14T18:58:30.000Z

I'll look into a fix

Answer 19 · 2016-10-14T18:59:11.000Z

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

Answer 20 · 2016-10-14T19:17:53.000Z

Fixed in v. 1.7.1

Answer 21 · 2016-10-19T07:03:04.000Z

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

Answer 22 · 2016-10-20T07:44:10.000Z

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).

Answer 23 · 2016-10-20T08:49:46.000Z

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/

Answer 24 · 2016-10-20T11:26:01.000Z

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

Answer 25 · 2016-10-20T14:29:43.000Z

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
#92 (comment),
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAatXilgbre5B-V4mH8VNt_TfnuT3WeFks5q10_LgaJpZM4Ie08j.

Answer 26 · 2016-10-23T18:24:20.000Z

Hey @stratboy

Could you please try v. 1.8.1

Answer 27 · 2017-03-23T10:56:21.000Z

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

Answer 28 · 2017-03-23T20:54:05.000Z

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

Answer 29 · 2017-03-24T13:26:48.000Z

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

Answer 30 · 2017-04-27T12:45:14.000Z

We currently have the same issue

Answer 31 · 2017-04-27T12:51:04.000Z

I also opened up a new issue for this: #140