Multiple image sources problem #92

stalinkay · 2016-05-15T13:01:00Z

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>

The text was updated successfully, but these errors were encountered:

tortilaman · 2016-08-25T23:33:19Z

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

dinbror · 2016-10-09T14:36:38Z

Hey @stalinkay, @tortilaman & @idoshamun

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

idoshamun · 2016-10-09T14:54:36Z

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 · 2016-10-09T17:44:25Z

@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 · 2016-10-09T19:19:10Z

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 · 2016-10-10T13:43:04Z

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 · 2016-10-10T20:04:55Z

@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 · 2016-10-10T20:06:53Z

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 · 2016-10-10T21:28:24Z

Fixed in v. 1.7.0.

stratboy · 2016-10-11T07:03:41Z

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

dinbror · 2016-10-11T07:37:49Z

@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 · 2016-10-11T07:46:10Z

@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 · 2016-10-11T08:09:24Z

@stratboy

Really odd. Do you have a live example?

stratboy · 2016-10-11T08:15:34Z

@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 · 2016-10-12T16:55:15Z

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 · 2016-10-13T21:53:25Z

@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 · 2016-10-14T07:32:27Z

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 · 2016-10-14T18:58:30Z

I'll look into a fix

dinbror · 2016-10-14T18:59:11Z

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

dinbror · 2016-10-14T19:17:53Z

Fixed in v. 1.7.1

stratboy · 2016-10-19T07:03:04Z

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

stratboy · 2016-10-20T07:44:10Z

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 · 2016-10-20T08:49:46Z

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 · 2016-10-20T11:26:01Z

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 · 2016-10-20T14:29:43Z

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.

dinbror · 2016-10-23T18:24:20Z

Hey @stratboy

Could you please try v. 1.8.1

yvmarques · 2017-03-23T10:56:21Z

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 · 2017-03-23T20:54:05Z

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 · 2017-03-24T13:26:48Z

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

tjwelde · 2017-04-27T12:45:14Z

We currently have the same issue

tjwelde · 2017-04-27T12:51:04Z

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

idoshamun mentioned this issue Sep 5, 2016

fix picture serve multi images issue #108

Closed

dinbror closed this as completed Oct 10, 2016

dinbror reopened this Oct 14, 2016

dinbror closed this as completed Oct 14, 2016

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Multiple image sources problem #92

Multiple image sources problem #92

stalinkay commented May 15, 2016 •

edited

Loading

tortilaman commented Aug 25, 2016

dinbror commented Oct 9, 2016

idoshamun commented Oct 9, 2016

dinbror commented Oct 9, 2016

idoshamun commented Oct 9, 2016

stratboy commented Oct 10, 2016 •

edited

Loading

dinbror commented Oct 10, 2016

idoshamun commented Oct 10, 2016

dinbror commented Oct 10, 2016

stratboy commented Oct 11, 2016

dinbror commented Oct 11, 2016

stratboy commented Oct 11, 2016

dinbror commented Oct 11, 2016

stratboy commented Oct 11, 2016 •

edited

Loading

dinbror commented Oct 12, 2016 •

edited

Loading

christopherwiegel commented Oct 13, 2016

stratboy commented Oct 14, 2016

dinbror commented Oct 14, 2016

dinbror commented Oct 14, 2016

dinbror commented Oct 14, 2016

stratboy commented Oct 19, 2016

stratboy commented Oct 20, 2016

stratboy commented Oct 20, 2016

dinbror commented Oct 20, 2016

stratboy commented Oct 20, 2016

dinbror commented Oct 23, 2016

yvmarques commented Mar 23, 2017 •

edited

Loading

dinbror commented Mar 23, 2017

yvmarques commented Mar 24, 2017

tjwelde commented Apr 27, 2017

tjwelde commented Apr 27, 2017

Multiple image sources problem #92

Multiple image sources problem #92

Comments

stalinkay commented May 15, 2016 • edited Loading

tortilaman commented Aug 25, 2016

dinbror commented Oct 9, 2016

idoshamun commented Oct 9, 2016

dinbror commented Oct 9, 2016

idoshamun commented Oct 9, 2016

stratboy commented Oct 10, 2016 • edited Loading

dinbror commented Oct 10, 2016

idoshamun commented Oct 10, 2016

dinbror commented Oct 10, 2016

stratboy commented Oct 11, 2016

dinbror commented Oct 11, 2016

stratboy commented Oct 11, 2016

dinbror commented Oct 11, 2016

stratboy commented Oct 11, 2016 • edited Loading

dinbror commented Oct 12, 2016 • edited Loading

christopherwiegel commented Oct 13, 2016

stratboy commented Oct 14, 2016

dinbror commented Oct 14, 2016

dinbror commented Oct 14, 2016

dinbror commented Oct 14, 2016

stratboy commented Oct 19, 2016

stratboy commented Oct 20, 2016

stratboy commented Oct 20, 2016

dinbror commented Oct 20, 2016

stratboy commented Oct 20, 2016

dinbror commented Oct 23, 2016

yvmarques commented Mar 23, 2017 • edited Loading

dinbror commented Mar 23, 2017

yvmarques commented Mar 24, 2017

tjwelde commented Apr 27, 2017

tjwelde commented Apr 27, 2017

stalinkay commented May 15, 2016 •

edited

Loading

stratboy commented Oct 10, 2016 •

edited

Loading

stratboy commented Oct 11, 2016 •

edited

Loading

dinbror commented Oct 12, 2016 •

edited

Loading

yvmarques commented Mar 23, 2017 •

edited

Loading