Rias: Images not loading in Safari Reader View and Instapaper

[jolantis]

Safari Reader View

Images that have not yet been loaded before Safari's (v8.0.6) Reader View is invoked, will not load in Reader View (see screenshot below) at all.

(link to page)

Instapaper (article view in browser)

Very likely related to the Safari Reader View issue, is the issue of images not being loaded in an article being saved to Instapaper (or Pocket for that matter). Again the {width} and {quality} placeholders are not being replaced. The Instapaper ‘scraper’ apparently does not trigger the Rias plugin, just like Safari's Reader View doesn't… (see screenshot below).

(link to page)

Any ideas? Possible to solve? Thanks (again) for your help and really great script.

[aFarkas]

Honestly, I don't really understand this reader view. In my test even if images are loaded in normal view, they are wrong in reader view.

To me it seems, that reader view a) somehow uses a server cache to store the output and b) uses some heuristics to generate this "wrong" srcitself.

If I'm correct, you could give the reader what he needs, by changing your data-src:

data-src="http://app.resrc.it/s=w800/o=80/http://altair.studiodumbar.com/thumbs/unsplash_525f012329589_1-eea7672ee759a09f7c979771d79b241e.jpg"

And then using the following JS to give lazySizes what he needs:

document.addEventListener('lazybeforeunveil', function(e){
    var src = e.target.getAttribute('data-src');
    if(!src){return;}
    e.target.setAttribute('data-src', src.replace(/s=w(\d+)/, 's=w{width}').replace(/o=(\d+)/, 'o={quality}'));
});

Not sure, but it might be possible, that you need to update your content so that the cache isn't kicking in.

[jolantis]

@aFarkas great this solves my issue; setting a default width and quality for readers like Instapaper!

[jolantis]

Hmm, and how would I do the same for Rias + Bgset? Also see my related (and now) closed issue #101, and an example.

Just targeting data-bgset is not working… the images is loaded (though not in Safari desktop/iOS), but just with the pre-filled (fallback) values for width and quality, so these aren't replaced by the calculated values?

[aFarkas]

Are you sure? The following script should work just fine for data-src and data-bgset:

document.addEventListener('lazybeforeunveil', function(e){
    var srcAttr = 'data-src';
    var src = e.target.getAttribute(srcAttr);
    if(!src){
        srcAttr = 'data-bgset';
        src = e.target.getAttribute(srcAttr);
        if(!src){return;}
    }
    e.target.setAttribute(srcAttr, src.replace(/s=w(\d+)/, 's=w{width}').replace(/o=(\d+)/, 'o={quality}'));
});

[jolantis]

Yeah it is working on stage (http://altair.studiodumbar.com) in latest stable Chrome, Safari and FF.

But I was testing locally, and the data-bgset is not working in Safari and FF (though it is in Chrome!). Compared to staging, everything is the same locally, except for the image path obviously (resrc.it does not work locally):

<div data-bgset="http://local.altair/thumbs/cover-01-0592393299182fce9d720a97aa745dd5.jpg" class="BgImage lazyload"></div>

And this is the output in Safari (and FF):

<div data-bgset="http://local.altair/thumbs/cover-01-0592393299182fce9d720a97aa745dd5.jpg" class="BgImage  lazyloaded">
   <picture style="display: none;">
     <source data-srcset="http://local.altair/thumbs/cover-01-0592393299182fce9d720a97aa745dd5.jpg" sizes="1278px" srcset="http://local.altair/thumbs/cover-01-0592393299182fce9d720a97aa745dd5.jpg">
     <img class="  lazyautosizes lazyloaded" data-sizes="auto" sizes="1278px">
   </picture>
</div>

The class is changed to lazyloaded, but there is no style="background-image: url(http://local.altair/thumbs/cover-01-0592393299182fce9d720a97aa745dd5.jpg);" in the output!

And this is the output in Chrome:

<div data-bgset="http://local.altair/thumbs/cover-01-0592393299182fce9d720a97aa745dd5.jpg" class="BgImage  lazyloaded" style="background-image: url(http://local.altair/thumbs/cover-01-0592393299182fce9d720a97aa745dd5.jpg);">
   <picture style="display: none;">
      <source data-srcset="http://local.altair/thumbs/cover-01-0592393299182fce9d720a97aa745dd5.jpg" sizes="810px" srcset="http://local.altair/thumbs/cover-01-0592393299182fce9d720a97aa745dd5.jpg"
      <img class=" lazyautosizes lazyloaded" data-sizes="auto" sizes="810px">
   </picture>
</div>

And (strangely?) enough it is working in Chrome locally. And as far as I recall it was working locally in Safari before… Do you have any idea? Writing and debugging javascript is not what I do daily… thanks again for your help!

BTW I'm using the latest versions of lazysizes and plugins (v1.1.3-RC1).

[aFarkas]

Can you change your local data-bgset to:

data-bgset="http://local.altair/thumbs/cover-01-0592393299182fce9d720a97aa745dd5.jpg?{width}"

or

 data-bgset="http://local.altair/thumbs/cover-01-0592393299182fce9d720a97aa745dd5.jpg?s=w300"

Or try by also adding the respimg polyfill https://github.com/aFarkas/lazysizes/tree/gh-pages/plugins/respimg.

Reason: the rias extension only includes a partial picture/srcset polyfill and needs to find a src with the corresponding pattern.

[jolantis]

Adding the ?{width} (or ?s=w300) to the local data-bgset did the trick! Thank you very much.

I also tried adding the respimg polypill, and though it made the background image loading work locally even without adding the ?{width} to the data-bgset, at the same time it also broke the ‘normal’ lazyloaded images in Safari (not in Chrome)! With the respimg polypill included it looks like the {width} and {quality} placeholders are nog being replaced anymore! Is the rias extension not playing nice with respimg polyfill? Can I run into (browser compatibility) issues, when I do not include the respimg polyfill? Any idea what it the issue can be in Safari?

---

Not directly related to this issue, but I wanted to ask you anyway: have you seen this post by Mat Marquis at CSS-tricks, about updating picturefill? I have no idea if it touches your code or not, and probably you already read about it… anyway, thanks again for the script (it works so much more ‘smoothly’ then other lazyload scrips I have tried!) and your help.