Skip to content

Commit af01791

Browse files
developer-digantadeveloper-diganta
authored
feat: added lazy loading to images (#33)
## Description <!-- Include a summary of the change made and also list the dependencies that are required if any --> I have added a lazy loading option to images. --- ## Issue Ticket Number Fixes [Issue #23 ] --- ## Type of change <!-- Please select all options that are applicable. --> - [] Bug fix (non-breaking change which fixes an issue) - [x] New feature (non-breaking change which adds functionality) - [ ] Breaking change (fix or feature that would cause existing functionality to not work as expected) - [x] This change requires a documentation update --- # Checklist: - [x] I have followed the contributing guidelines of this project as mentioned in [CONTRIBUTING.md](/CONTRIBUTING.md) - [x] I have created an [issue](https://github.com/colbyfayock/netlify-plugin-cloudinary/issues) ticket for this PR - [x] I have checked to ensure there aren't other open [Pull Requests](https://github.com/colbyfayock/netlify-plugin-cloudinary/pulls) for the same update/change? - [x] I have performed a self-review of my own code - [ ] I have run tests locally to ensure they all pass - [ ] I have commented my code, particularly in hard-to-understand areas - [ ] I have made corresponding changes needed to the documentation
1 parent 039c9bb commit af01791

File tree

5 files changed

+43
-7
lines changed

5 files changed

+43
-7
lines changed

‎README.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -84,6 +84,7 @@ yarn add netlify-plugin-cloudinary
8484
| imagesPath | No | /assets | Local path application serves image assets from |
8585
| folder | No | myfolder | Folder all media will be stored in. Defaults to Netlify site name |
8686
| uploadPreset | No | my-preset | Defined set of asset upload defaults in Cloudinary |
87+
| loadingStrategy | No | eager | The method in which in which images are loaded (Ex: lazy, eager) |
8788

8889
*Cloud Name must be set as an environment variable if not as an input
8990

‎manifest.yml

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,4 +16,8 @@ inputs:
1616
description: "Folder all media will be stored in. Defaults to Netlify site name"
1717
- name: uploadPreset
1818
required: false
19-
description: "Defined set of asset upload defaults in Cloudinary"
19+
description: "Defined set of asset upload defaults in Cloudinary"
20+
- name: loadingStrategy
21+
required: false
22+
description: "The method in which in which images are loaded (Ex: lazy, eager)"
23+
default: "lazy"

‎src/index.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -163,6 +163,7 @@ module.exports = {
163163
const { PUBLISH_DIR } = constants;
164164
const {
165165
deliveryType,
166+
loadingStrategy,
166167
uploadPreset,
167168
folder = process.env.SITE_NAME
168169
} = inputs;

‎src/lib/cloudinary.js

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -186,7 +186,8 @@ async function updateHtmlImagesToCloudinary(html, options = {}) {
186186
uploadPreset,
187187
folder,
188188
localDir,
189-
remoteHost
189+
remoteHost,
190+
loadingStrategy='lazy',
190191
} = options;
191192

192193
const errors = [];
@@ -221,7 +222,8 @@ async function updateHtmlImagesToCloudinary(html, options = {}) {
221222
path: imgSrc,
222223
localDir,
223224
uploadPreset,
224-
remoteHost
225+
remoteHost,
226+
loadingStrategy
225227
});
226228
cloudinaryUrl = url;
227229
} catch(e) {
@@ -235,6 +237,8 @@ async function updateHtmlImagesToCloudinary(html, options = {}) {
235237
}
236238

237239
$img.setAttribute('src', cloudinaryUrl);
240+
$img.setAttribute('loading', loadingStrategy);
241+
238242
// convert srcset images to cloudinary
239243
const srcset = $img.getAttribute('srcset');
240244
if (srcset) {

‎tests/lib/cloudinary.test.js

Lines changed: 30 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -104,7 +104,7 @@ describe('lib/util', () => {
104104
remoteHost: 'https://cloudinary.netlify.app'
105105
});
106106

107-
expect(html).toEqual(`<html><head></head><body><p><img src=\"https://res.cloudinary.com/${CLOUDINARY_CLOUD_NAME}/image/fetch/f_auto,q_auto/https://cloudinary.netlify.app/images/stranger-things-dustin.jpeg\"></p></body></html>`);
107+
expect(html).toEqual(`<html><head></head><body><p><img src=\"https://res.cloudinary.com/${CLOUDINARY_CLOUD_NAME}/image/fetch/f_auto,q_auto/https://cloudinary.netlify.app/images/stranger-things-dustin.jpeg\" loading=\"lazy"\></p></body></html>`);
108108
});
109109

110110
it('should replace a remote image with a Cloudinary URL', async () => {
@@ -114,7 +114,7 @@ describe('lib/util', () => {
114114
deliveryType: 'fetch'
115115
});
116116

117-
expect(html).toEqual(`<html><head></head><body><p><img src=\"https://res.cloudinary.com/${CLOUDINARY_CLOUD_NAME}/image/fetch/f_auto,q_auto/https://i.imgur.com/vtYmp1x.png\"></p></body></html>`);
117+
expect(html).toEqual(`<html><head></head><body><p><img src=\"https://res.cloudinary.com/${CLOUDINARY_CLOUD_NAME}/image/fetch/f_auto,q_auto/https://i.imgur.com/vtYmp1x.png\" loading=\"lazy"\></p></body></html>`);
118118
});
119119

120120

@@ -124,11 +124,37 @@ describe('lib/util', () => {
124124
const { html } = await updateHtmlImagesToCloudinary(sourceHtml, {
125125
deliveryType: 'fetch',
126126
localDir: 'tests',
127-
remoteHost: 'https://cloudinary.netlify.app'
127+
remoteHost: 'https://cloudinary.netlify.app',
128+
});
129+
130+
expect(html).toEqual(`<html><head></head><body><p><img src=\"https://res.cloudinary.com/testcloud/image/fetch/f_auto,q_auto/https://cloudinary.netlify.app/images/stranger-things-dustin.jpeg\" srcset=\"https://res.cloudinary.com/${CLOUDINARY_CLOUD_NAME}/image/fetch/f_auto,q_auto/https://cloudinary.netlify.app/images/stranger-things-dustin.jpeg 1x, https://res.cloudinary.com/${CLOUDINARY_CLOUD_NAME}/image/fetch/f_auto,q_auto/https://cloudinary.netlify.app/images/stranger-things-dustin.jpeg 2x\" loading=\"lazy"\></p></body></html>`);
131+
});
132+
133+
it('should add lazy loading to image when no option is provided', async () => {
134+
const sourceHtml = '<html><head></head><body><p><img src="https://i.imgur.com/vtYmp1x.png"></p></body></html>';
135+
136+
const { html } = await updateHtmlImagesToCloudinary(sourceHtml, {
137+
deliveryType: 'fetch',
138+
localDir: 'tests',
139+
remoteHost: 'https://cloudinary.netlify.app',
128140
});
129141

130-
expect(html).toEqual(`<html><head></head><body><p><img src=\"https://res.cloudinary.com/testcloud/image/fetch/f_auto,q_auto/https://cloudinary.netlify.app/images/stranger-things-dustin.jpeg\" srcset=\"https://res.cloudinary.com/${CLOUDINARY_CLOUD_NAME}/image/fetch/f_auto,q_auto/https://cloudinary.netlify.app/images/stranger-things-dustin.jpeg 1x, https://res.cloudinary.com/${CLOUDINARY_CLOUD_NAME}/image/fetch/f_auto,q_auto/https://cloudinary.netlify.app/images/stranger-things-dustin.jpeg 2x\"></p></body></html>`);
142+
expect(html).toEqual(`<html><head></head><body><p><img src=\"https://res.cloudinary.com/${CLOUDINARY_CLOUD_NAME}/image/fetch/f_auto,q_auto/https://i.imgur.com/vtYmp1x.png\" loading=\"lazy"\></p></body></html>`);
131143
});
144+
145+
it('should add eager loading to image when eager option is provided for loadingStrategy', async () => {
146+
const sourceHtml = '<html><head></head><body><p><img src="https://i.imgur.com/vtYmp1x.png"></p></body></html>';
147+
148+
const { html } = await updateHtmlImagesToCloudinary(sourceHtml, {
149+
deliveryType: 'fetch',
150+
localDir: 'tests',
151+
remoteHost: 'https://cloudinary.netlify.app',
152+
loadingStrategy: 'eager'
153+
});
154+
155+
expect(html).toEqual(`<html><head></head><body><p><img src=\"https://res.cloudinary.com/${CLOUDINARY_CLOUD_NAME}/image/fetch/f_auto,q_auto/https://i.imgur.com/vtYmp1x.png\" loading=\"eager"\></p></body></html>`);
156+
});
157+
132158
});
133159

134160
});

0 commit comments

Comments
 (0)