Double downloading?

Hi PJ,

I’m not able to reproduce the issue you’re seeing. Could you tell me which version of the plugin you have installed and which browser version you’re using when you see the double download? Also, do you have any other plugins installed that would be trying to affect the way images are loaded on your site?

Thanks,
Joe

@jow McGill

Yes, this is a known issue with picturefill, that can’t be solved with JS and needs to be solved with the markup.

The produced markup should look like this:

<img
  class="image__img"
  src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
  srcset="https://elit.dev/wp-content/uploads/2015/01/taylor-160x107.jpg 160w,
    https://elit.dev/wp-content/uploads/2015/01/taylor-235x157.jpg 235w,
    https://elit.dev/wp-content/uploads/2015/01/taylor-653x435.jpg 653w,
    https://elit.dev/wp-content/uploads/2015/01/taylor-930x620.jpg 930w,
    https://elit.dev/wp-content/uploads/2015/01/taylor-620x413.jpg 620w,
    https://elit.dev/wp-content/uploads/2015/01/taylor-413x275.jpg 413w,
    https://elit.dev/wp-content/uploads/2015/01/taylor-992x661.jpg 992w"
/>

Also note: that I have removed the double 992w image candidate.

@pj
You can workaround this problem by trying to install the following lazyload plugin (it’s still beta, and I’m not a php/wordpress dev, but got/want some help) on top this plugin.

@joe McGill: Thank you for your response. I’m using 2.0.2 and Chrome 40.0.2214.94.

I uninstalled all the plugins except for RICGRI. Still the correctly sized image is downloaded, followed by the image I have set as the largest needed. If you have any other suggestions or workarounds, I would love to try them. This plugin looks like a great solution.

@afarkas. Thank you for your response. I’m not sure why, but I have the same problem when I hard-code your suggested markup: the correct image comes in, followed by the largest.

@pj
Actually I was only referring to polyfilled browsers (i.e. all browsers but Chrome). About Chrome: can you create an example:
https://jsfiddle.net/

Hi @afarkas. Thank you for responding again to my question.

The problem I notice also appears on one of the Picturefill demo pages.

Doesn’t this image show that two images are downloading?

This is the same problem (I think it’s a problem) I’m having with the plugin. I realize this may be less an issue with the plugin than with Picturefill itself.

This is not a picturefill issue. If you have the same result with FF, IE or Safari it is either a picturefill issue or more likely an issue with the respimage markup provided by the wordpress plugin.

About this chrome thing: I think this is a Chrome bug, but I’m not 100% sure. If you disable or clear the cache or you normally navigate to the page there is only one request.

If you reload and before reload the large image was in cache, this double download seems to happen.

I think Chrome detects, that the large image is in cache and loads it, but due to how the user requests the page all resources should be refreshed and therefore this double request happens or what ever, I really don’t know.

I will ask around and inform you, but it’s not that bad as it looks like ;-).

@pj: I’m using Chrome Version 40.0.2214.111 on a Mac and I do not have the problem with the double loading on the demo page. May be it is a problem with a Chrome Extension you are using?

@nabjoern:

This bug happens under specific circumstances. Can you go through this bug report:
https://code.google.com/p/chromium/issues/detail?id=458100

@pj: Only the small image is loading on reload…

Thank you @afarkas for looking into this. I’m still worried about this, but a little less so.

And thank you, @nabjoern. I seem to always be getting both images on both a normal reload and a ‘hard’ reload. I’m using a Mac with the same version of Chrome (although I’m still on 10.9.5, if that matters).

I see this under Safari 8.03 so it’s not a Chrome specific issue. It does NOT happen in Firefox 36. Oddly, in Chrome 41 I get the right size and the next to largest size (not the specified largest size).

Here’s a pastebin with the WP code and resulting HTML: https://pastebin.com/p3Atff1D

I’ll have the site at a publicly accessible URL later this week.

PS: This is with 2.11

Further investigation…

I removed the WP functions calling the ACF field and simply placed in a call to get the featured image, i.e.:

<?php if ( has_post_thumbnail() ) { the_post_thumbnail();} ?>

Same issue. HOWEVER – in both this and the above example the double downloading does NOT happen when you first load the page. It happens on the second and subsequent refreshes.