Multiple image sources problem #92

Closed
stalinkay opened this Issue May 15, 2016 · 26 comments

Projects

None yet

6 participants

@stalinkay
stalinkay commented May 15, 2016 edited

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
Owner
dinbror commented Oct 9, 2016

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
Owner
dinbror commented Oct 9, 2016

@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
stratboy commented Oct 10, 2016 edited

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
Owner
dinbror commented Oct 10, 2016

@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
Owner
dinbror commented Oct 10, 2016

Fixed in v. 1.7.0.

@dinbror dinbror closed this Oct 10, 2016
@stratboy

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

@dinbror
Owner
dinbror commented Oct 11, 2016

@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
Owner
dinbror commented Oct 11, 2016

@stratboy

Really odd. Do you have a live example?

@stratboy
stratboy commented Oct 11, 2016 edited

@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
Owner
dinbror commented Oct 12, 2016 edited

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
Owner
dinbror commented Oct 14, 2016

I'll look into a fix

@dinbror dinbror reopened this Oct 14, 2016
@dinbror
Owner
dinbror commented Oct 14, 2016

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

@dinbror
Owner
dinbror commented Oct 14, 2016

Fixed in v. 1.7.1

@dinbror dinbror closed this Oct 14, 2016
@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
Owner
dinbror commented Oct 20, 2016

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

@dinbror
Owner
dinbror commented Oct 23, 2016

Hey @stratboy

Could you please try v. 1.8.1

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment