Skip to content

Commit 078e3ce

Browse files
mfranzkemfranzke
committed
refactor: replacing requestAnimationFrame by will-change
as this is the correct CSS property and that for better solution for giving the browser a hint
1 parent eda4c19 commit 078e3ce

20 files changed

+42
-20
lines changed

‎README.md

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -47,9 +47,22 @@ You may optionally load via NPM or Bower:
4747

4848
You could even load the polyfill asynchronously: <https://output.jsbin.com/codelib/1>
4949

50+
Include one of the provided JavaScript files depending on your setup plus the CSS file:
51+
52+
```html
53+
<script src="dist/loading-attribute-polyfill.js" async></script>
54+
<link rel="stylesheet" href="dist/loading-attribute-polyfill.css" />
55+
```
56+
57+
or e.g. within JS
58+
59+
```js
60+
import loadingAttributePolyfill from "node_modules/loading-attribute-polyfill/dist/loading-attribute-polyfill.module.js";
61+
```
62+
5063
Afterwards, you need to wrap all of your `<img>` and `<iframe>` HTML tags (in the case of `<picture>` use the complementary `<source>` HTML tags) that you'd like to lazy load with a `<noscript>` HTML tag (with the attribute `class="loading-lazy"`.)
5164

52-
Please keep in mind that it's beneficial to even also include `width` and `height` attributes on `<img>` HTML tags, as the browser could determine the aspect ratio via those two attributes values being set (even if you overwrite them via CSS), compare to the great work by Jen Simmons on this topic, e.g. within these articles <https://css-tricks.com/do-this-to-improve-image-loading-on-your-website/> (with video) or <https://css-tricks.com/what-if-we-got-aspect-ratio-sized-images-by-doing-almost-nothing/>
65+
Please keep in mind that it's important to even also include `width` and `height` attributes on `<img>` HTML tags, as the browser could determine the aspect ratio via those two attributes values being set (even if you overwrite them via CSS), compare to the great work by Jen Simmons on this topic, e.g. within these articles <https://css-tricks.com/do-this-to-improve-image-loading-on-your-website/> (with video) or <https://css-tricks.com/what-if-we-got-aspect-ratio-sized-images-by-doing-almost-nothing/>
5366

5467
And please "Avoid lazy-loading images that are in the first visible viewport", compare to [the article "Browser-level image lazy-loading for the web"](https://web.dev/browser-level-image-lazy-loading/#avoid-lazy-loading-images-that-are-in-the-first-visible-viewport) published on web.dev:
5568

‎demo/index.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -47,6 +47,7 @@
4747
height: auto;
4848
}
4949
</style>
50+
<link rel="stylesheet" href="../dist/loading-attribute-polyfill.css" />
5051
</head>
5152
<body>
5253
<header>

‎dist/loading-attribute-polyfill.css

Lines changed: 2 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/loading-attribute-polyfill.css.map

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/loading-attribute-polyfill.js

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)