prehistoric-systems/omnivore
1
0
Fork 0
mirror of https://github.com/omnivore-app/omnivore.git synced 2026-03-11 08:54:26 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Remove lazy loaded srcset elements

Browse source 
Some tools like jetpack: https://jetpack.com/support/lazy-images/
use a temporary srcset element set to a data image when lazy
loading, these are later removed by JS. We test if there is
a valid src attribute and if the srcset attribute is a data embed
to remove these.
This commit is contained in:
Jackson Harper 2022-04-29 10:05:31 -07:00
parent 7f827dee55
commit a24b976546
2 changed files with 24 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
packages/readabilityjs/Readability.js
View file

@ -507,11 +507,12 @@ Readability.prototype = {
/** Creates imageproxy links for all article images with href source */
_createImageProxyLinks: function (articleContent) {
if (this.createImageProxyUrl !== undefined) {
const dataUriRegex = /^data:image\/(?:png|jpe?g|gif);base64,/;
// replace all images' href source
const images = articleContent.getElementsByTagName('img');
Array.from(images).forEach(image => {
const src = image.getAttribute("src");
const dataUriRegex = /^data:image\/(?:png|jpe?g|gif);base64,/;
// do not proxy data uri
if (src && !dataUriRegex.test(src)) {
@ -536,8 +537,16 @@ Readability.prototype = {
const elements = articleContent.querySelectorAll('[srcset]');
Array.from(elements).forEach(element => {
let resultSrcset = '';
const srcSet = element.getAttribute('srcset')
const items = parseSrcset(element.getAttribute('srcset'));
// If the srcset is a data image its probably just for lazy loading
// so we want to remove it.
if (dataUriRegex.test(srcSet) && element.getAttribute('src')) {
element.removeAttribute('srcset');
return;
}
const items = parseSrcset(srcSet);
for (let item of items) {
const { url: link, w, x, d } = item;
if (!w && !x && !d) {

13
packages/readabilityjs/test/test-readability.js
View file

@ -302,6 +302,19 @@ describe("Readability API", function() {
}).parse().content;
expect(content).eql(expected_xhtml);
});
it("should remove srcset elements that are lazy loading placeholders", function() {
var dom = new JSDOM('My image: <img class="shrinkToFit jetpack-lazy-image" src="https://i0.wp.com/cdn-images-1.medium.com/max/2000/1*rPXwIczUJRCE54v8FfAHGw.jpeg?resize=900%2C380&#038;ssl=1" alt width="900" height="380" data-recalc-dims="1" data-lazy-src="https://i0.wp.com/cdn-images-1.medium.com/max/2000/1*rPXwIczUJRCE54v8FfAHGw.jpeg?resize=900%2C380&amp;is-pending-load=1#038;ssl=1" srcset="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"></img>');
var expected_xhtml = '<div id="readability-page-1" class="page">' +
'My image: <img src="https://i0.wp.com/cdn-images-1.medium.com/max/2000/1*rPXwIczUJRCE54v8FfAHGw.jpeg?resize=900%2C380&amp;is-pending-load=1#038;ssl=1" alt="" width="900" height="380" data-recalc-dims="1" data-lazy-src="https://i0.wp.com/cdn-images-1.medium.com/max/2000/1*rPXwIczUJRCE54v8FfAHGw.jpeg?resize=900%2C380&amp;is-pending-load=1#038;ssl=1">' +
'</div>'
var content = new Readability(dom.window.document, {
createImageProxyUrl: function(url) {
return url;
}
}).parse().content;
expect(content).eql(expected_xhtml);
});
});
});