Skip to content

Commit

Permalink
Merge branch 'release/12.4.0'
Browse files Browse the repository at this point in the history
  • Loading branch information
@verlok
verlok committed Nov 20, 2019
2 parents e557f84 + 201868b commit 5539336
Show file tree
Hide file tree
Showing 16 changed files with 45 additions and 20 deletions.
4 changes: 4 additions & 0 deletions CHANGELOG.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,10 @@

## Version 12

#### 12.4.0

Video `poster`s can now be loaded lazily, as requested in #365

#### 12.3.0

Callbacks now pass more arguments!
Expand Down
27 changes: 15 additions & 12 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -92,22 +92,24 @@ Notes:

```html
<video class="lazy" controls width="620"
data-src="lazy.mp4" poster="lazy.jpg">
data-src="lazy.mp4" data-poster="lazy.jpg">
<source type="video/mp4" data-src="lazy.mp4">
<source type="video/ogg" data-src="lazy.ogg">
<source type="video/avi" data-src="lazy.avi">
</video>
```

Please note that the video poster can be lazily loaded too.

#### Lazy iframe

```html
<iframe class="lazy" data-src="lazyFrame.html" poster="lazy.jpg"></iframe>
<iframe class="lazy" data-src="lazyFrame.html"></iframe>
```

## 👩‍💻 Getting started - Script

The latest, recommended version of LazyLoad is **12.3.0**.
The latest, recommended version of LazyLoad is **12.4.0**.

### To polyfill or not to polyfill IntersectionObserver?

Expand All @@ -122,14 +124,14 @@ If you prefer to load a polyfill, the regular LazyLoad behaviour is granted.
The easiest way to use LazyLoad is to include the script from a CDN:

```html
<script src="https://cdn.jsdelivr.net/npm/vanilla-lazyload@12.3.0/dist/lazyload.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vanilla-lazyload@12.4.0/dist/lazyload.min.js"></script>
```

Or, with the IntersectionObserver polyfill:

```html
<script src="https://cdn.jsdelivr.net/npm/[email protected]/intersection-observer.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vanilla-lazyload@12.3.0/dist/lazyload.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vanilla-lazyload@12.4.0/dist/lazyload.min.js"></script>
```

Then, in your javascript code:
Expand Down Expand Up @@ -162,7 +164,7 @@ Include RequireJS:
Then `require` the AMD version of LazyLoad, like this:

```js
var lazyLoadAmdUrl = "https://cdn.jsdelivr.net/npm/vanilla-lazyload@12.3.0/dist/lazyload.amd.min.js";
var lazyLoadAmdUrl = "https://cdn.jsdelivr.net/npm/vanilla-lazyload@12.4.0/dist/lazyload.amd.min.js";
var polyfillAmdUrl = "https://cdn.jsdelivr.net/npm/[email protected]/intersection-observer-amd.js";

/// Dynamically define the dependencies
Expand Down Expand Up @@ -207,7 +209,7 @@ To do so, **you must define the options before including the script**. You can p
Then include the script.
```html
<script async src="https://cdn.jsdelivr.net/npm/vanilla-lazyload@12.3.0/dist/lazyload.min.js"></script>
<script async src="https://cdn.jsdelivr.net/npm/vanilla-lazyload@12.4.0/dist/lazyload.min.js"></script>
```
**Possibly place the script tag right before the closing `</body>` tag**. If you can't do that, LazyLoad could be executed before the browser has loaded all the DOM, and you'll need to call its `update()` method to make it check the DOM again.
Expand All @@ -233,7 +235,7 @@ Same as above, but you must put the `addEventListener` code shown below before i
Then include the script.
```html
<script async src="https://cdn.jsdelivr.net/npm/vanilla-lazyload@12.3.0/dist/lazyload.min.js"></script>
<script async src="https://cdn.jsdelivr.net/npm/vanilla-lazyload@12.4.0/dist/lazyload.min.js"></script>
```
Now you'll be able to call its methods, like:
Expand Down Expand Up @@ -593,10 +595,11 @@ Here's the list of the options.
| `elements_selector` | The CSS selector of the elements to load lazily, which will be selected as descendants of the `container` object. | `"img"` | `".images img.lazy"` |
| `threshold` | A number of pixels representing the outer distance off the scrolling area from which to start loading the elements. | `300` | `0` |
| `thresholds` | Similar to `threshold`, but accepting multiple values and both `px` and `%` units. It maps directly to the `rootMargin` property of IntersectionObserver ([read more](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/rootMargin)), so it must be a string with a syntax similar to the CSS `margin` property. You can use it when you need to have different thresholds for the scrolling area. It overrides `threshold` when passed. | `null` | `"500px 10%"` |
| `data_src` | The name of the data attribute containing the original image source, excluding the `"data-"` part. E.g. if your data attribute is named `"data-src"`, just pass `"src"` | `"src"` | `"original"` |
| `data_srcset` | The name of the data attribute containing the original image source set in either `img` and `source` tags, excluding the `"data-"` part. E.g. if your data attribute is named `"data-srcset"`, just pass `"srcset"` | `"srcset"` | `"original-set"` |
| `data_sizes` | The name of the data attribute containing the sizes attribute to use, excluding the `"data-"` part. E.g. if your data attribute is named `"data-sizes"`, just pass `"sizes"` | `"sizes"` | `null` |
| `data_bg` | The name of the data attribute containing the value of `background-image` to load lazily, excluding the `"data-"` part. E.g. if your data attribute is named `"data-bg"`, just pass `"bg"`. The attribute value must be a valid value for `background-image`, including the `url()` part of the CSS instruction. | `"bg"` | `"url(img1.jpg), url(img2.jpg)"` |
| `data_src` | The name of the data attribute containing the original image source, excluding the `"data-"` part. E.g. if your data attribute is named `"data-src"`, just pass `"src"` | `"src"` | `"lazy-src"` |
| `data_srcset` | The name of the data attribute containing the original image source set in either `img` and `source` tags, excluding the `"data-"` part. E.g. if your data attribute is named `"data-srcset"`, just pass `"srcset"` | `"srcset"` | `"lazy-srcset"` |
| `data_sizes` | The name of the data attribute containing the sizes attribute to use, excluding the `"data-"` part. E.g. if your data attribute is named `"data-sizes"`, just pass `"sizes"` | `"sizes"` | `"lazy-sizes"` |
| `data_bg` | The name of the data attribute containing the value of `background-image` to load lazily, excluding the `"data-"` part. E.g. if your data attribute is named `"data-bg"`, just pass `"bg"`. The attribute value must be a valid value for `background-image`, including the `url()` part of the CSS instruction. | `"bg"` | `"lazy-bg"` |
| `data_poster` | The name of the data attribute containing the value of `poster` to load lazily, excluding the `"data-"` part. E.g. if your data attribute is named `"data-poster"`, just pass `"poster"`. | `"poster"` | `"lazy-poster"` |
| `class_loading` | The class applied to the elements while the loading is in progress. | `"loading"` | `"lazy-loading"` |
| `class_loaded` | The class applied to the elements when the loading is complete. | `"loaded"` | `"lazy-loaded"` |
| `class_error` | The class applied to the elements when the element causes an error. | `"error"` | `"lazy-error"` |
Expand Down
2 changes: 1 addition & 1 deletion demos/video.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,7 @@
controls
width="620"
data-src="https://archive.org/download/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4"
poster="https://peach.blender.org/wp-content/uploads/title_anouncement.jpg?x11217"
data-poster="https://peach.blender.org/wp-content/uploads/title_anouncement.jpg?x11217"
>
<source
type="video/mp4"
Expand Down
2 changes: 2 additions & 0 deletions dist/lazyload.amd.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@ define(function () {
data_srcset: "srcset",
data_sizes: "sizes",
data_bg: "bg",
data_poster: "poster",
class_loading: "loading",
class_loaded: "loaded",
class_error: "error",
Expand Down Expand Up @@ -212,6 +213,7 @@ define(function () {
sourceTags.forEach(function (sourceTag) {
setAttributeIfValue(sourceTag, "src", getData(sourceTag, settings.data_src));
});
setAttributeIfValue(element, "poster", getData(element, settings.data_poster));
setAttributeIfValue(element, "src", getData(element, settings.data_src));
element.load();
};
Expand Down
Loading

0 comments on commit 5539336

Please sign in to comment.