Skip to content

Commit

Permalink
Merge branch 'release/10.0.0'
Browse files Browse the repository at this point in the history
  • Loading branch information
@verlok
verlok committed Sep 1, 2017
2 parents b9fb6ac + 569f14a commit 8db1570
Show file tree
Hide file tree
Showing 27 changed files with 1,311 additions and 1,462 deletions.
8 changes: 8 additions & 0 deletions CHANGELOG.md
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,13 @@
# CHANGELOG

## Version 10

#### 10.0.0

- Default options changes values:
- default for `data_src` is now `src` (was `original`)
- default for `data_srcset` is now `srcset` (was `original-set`)

## Version 9

#### 9.0.1
Expand Down
36 changes: 18 additions & 18 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@ HTML

```html
<img alt="..."
data-original="../img/44721746JJ_15_a.jpg"
data-src="../img/44721746JJ_15_a.jpg"
width="220" height="280">
```

Expand All @@ -68,8 +68,8 @@ var myLazyLoad = new LazyLoad();
HTML

```html
<img data-original="/your/image1.jpg"
data-original-set="/your/image1.jpg 200w, /your/image1@2x.jpg 400w"
<img data-src="/your/image1.jpg"
data-srcset="/your/image1.jpg 200w, /your/image1@2x.jpg 400w"
sizes="(min-width: 20em) 35vw, 100vw">
```

Expand All @@ -89,9 +89,9 @@ HTML

```html
<picture>
<source media="(min-width: 1024px)" data-original-set="/your/image1a.jpg" />
<source media="(min-width: 500px)" data-original-set="/your/image1b.jpg" />
<img alt="Stivaletti" data-original="/your/image1.jpg">
<source media="(min-width: 1024px)" data-srcset="/your/image1a.jpg" />
<source media="(min-width: 500px)" data-srcset="/your/image1b.jpg" />
<img alt="Stivaletti" data-src="/your/image1.jpg">
</picture>
```

Expand Down Expand Up @@ -202,7 +202,7 @@ HTML
```html
<div id="scrollingPanel">
<img alt="Image description"
data-original="../img/44721746JJ_15_a.jpg"
data-src="../img/44721746JJ_15_a.jpg"
width="220" height="280">
<!-- More images -->
</div>
Expand All @@ -227,13 +227,13 @@ HTML
```html
<div id="scrollingPanel1">
<img alt="Image description"
data-original="../img/44721746JJ_15_a.jpg"
data-src="../img/44721746JJ_15_a.jpg"
width="220" height="280">
<!-- More images -->
</div>
<div id="scrollingPanel2">
<img alt="Image description"
data-original="../img/44721746JJ_15_a.jpg"
data-src="../img/44721746JJ_15_a.jpg"
width="220" height="280">
<!-- More images -->
</div>
Expand Down Expand Up @@ -277,7 +277,7 @@ myLazyLoad.update();
HTML

```html
<iframe data-original="iframes/i01.html" frameborder="0"></iframe>
<iframe data-src="iframes/i01.html" frameborder="0"></iframe>
```

Javascript
Expand All @@ -297,7 +297,7 @@ var myLazyLoad = new LazyLoad({
HTML

```html
<div class="lazy" data-original="../img/44721746JJ_15_a.jpg"></div>
<div class="lazy" data-src="../img/44721746JJ_15_a.jpg"></div>
```

Javascript
Expand All @@ -308,7 +308,7 @@ var myLazyLoad = new LazyLoad({
});
```

That's it. Whenever the element selected by `elements_selector` is not an `img` or an `iframe`, LazyLoad puts the image found in the `data-original` attribute in the `background-image` of the element.
That's it. Whenever the element selected by `elements_selector` is not an `img` or an `iframe`, LazyLoad puts the image found in the `data-src` attribute in the `background-image` of the element.

[DEMO](http://verlok.github.io/lazyload/demos/background_images.html) | [SOURCE](https://github.com/verlok/lazyload/blob/master/demos/background_images.html) | [API](#api)

Expand All @@ -320,13 +320,13 @@ HTML

```html
<div class="horzContainer">
<img src="" alt="Row 01, col 01" data-original="https://placeholdit.imgix.net/~text?txtsize=19&amp;txt=row_01_col_01&amp;w=200&amp;h=200">
<img src="" alt="Row 01, col 02" data-original="https://placeholdit.imgix.net/~text?txtsize=19&amp;txt=row_01_col_02&amp;w=200&amp;h=200">
<img src="" alt="Row 01, col 01" data-src="https://placeholdit.imgix.net/~text?txtsize=19&amp;txt=row_01_col_01&amp;w=200&amp;h=200">
<img src="" alt="Row 01, col 02" data-src="https://placeholdit.imgix.net/~text?txtsize=19&amp;txt=row_01_col_02&amp;w=200&amp;h=200">
<!-- ... -->
</div>
<div class="horzContainer">
<img src="" alt="Row 02, col 01" data-original="https://placeholdit.imgix.net/~text?txtsize=19&amp;txt=row_02_col_01&amp;w=200&amp;h=200">
<img src="" alt="Row 02, col 02" data-original="https://placeholdit.imgix.net/~text?txtsize=19&amp;txt=row_02_col_02&amp;w=200&amp;h=200">
<img src="" alt="Row 02, col 01" data-src="https://placeholdit.imgix.net/~text?txtsize=19&amp;txt=row_02_col_01&amp;w=200&amp;h=200">
<img src="" alt="Row 02, col 02" data-src="https://placeholdit.imgix.net/~text?txtsize=19&amp;txt=row_02_col_02&amp;w=200&amp;h=200">
<!-- ... -->
</div>
```
Expand Down Expand Up @@ -443,8 +443,8 @@ Here's the list of the options.
| `container` | The scrolling container, and the container of the elements in the `elements_selector` option. | `document` |
| `elements_selector` | The selector of the image elements inside the container, as descendants of the element in the `container` option | `"img"` |
| `threshold` | The distance out of the viewport, expressed in pixel, before which to start loading the images | `300` |
| `data_src` | The name of the dataset property containing the original image source. See [dataset naming note](#dataset-naming-note) below. | `"original"` |
| `data_srcset` | The name of the dataset property containing the original image source set in either `img` and `source` tags. See [dataset naming note](#dataset-naming-note) below. | `"originalSet"` |
| `data_src` | The name of the dataset property containing the original image source. See [dataset naming note](#dataset-naming-note) below. | `"src"` |
| `data_srcset` | The name of the dataset property containing the original image source set in either `img` and `source` tags. See [dataset naming note](#dataset-naming-note) below. | `"srcset"` |
| `class_loading` | The class applied to the elements while the loading is in progress. | `"loading"` |
| `class_loaded` | The class applied to the elements when the loading is complete | `"loaded"` |
| `class_error` | The class applied to the elements when the element causes an error | `"error"` |
Expand Down
46 changes: 23 additions & 23 deletions __tests__/lazyload.setSources.test.js
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
import {setSources, setSourcesForPicture} from "../src/lazyLoad.setSources";

const lazyloadSettings = {
data_src: "original",
data_srcset: "originalSet"
data_src: "src",
data_srcset: "srcset"
};

expect.extend({
Expand Down Expand Up @@ -37,8 +37,8 @@ describe("setSources for image", () => {

test("...with initially empty src and srcset", () => {
img.dataset = {
"original": img200,
"originalSet": img400
"src": img200,
"srcset": img400
};
setSources(img, lazyloadSettings);
expect(img).toHaveAttributeValue("src", img200);
Expand All @@ -47,8 +47,8 @@ describe("setSources for image", () => {

test("...with initial values in src and srcset", () => {
img.dataset = {
"original": img200,
"originalSet": img400
"src": img200,
"srcset": img400
};
img.setAttribute("src", img1);
img.setAttribute("srcset", img1);
Expand All @@ -58,8 +58,8 @@ describe("setSources for image", () => {
});
test("...with initial values in src and srcset and empty data-*", () => {
img.dataset = {
"original": "",
"originalSet": ""
"src": "",
"srcset": ""
};
img.setAttribute("src", img200);
img.setAttribute("srcset", img400);
Expand All @@ -69,7 +69,7 @@ describe("setSources for image", () => {
});
});

describe("_setSources for iframe", () => {
describe("setSources for iframe", () => {
let iframe;
let srcToLoad = "http://www.google.it";
let preloadedSrc = srcToLoad + "/doodle";
Expand All @@ -79,30 +79,30 @@ describe("_setSources for iframe", () => {
});
test("...with initially empty src", () => {
iframe.dataset = {
"original": srcToLoad
"src": srcToLoad
};
setSources(iframe, lazyloadSettings);
expect(iframe).toHaveAttributeValue("src", srcToLoad);
});
test("...with initial value in src", () => {
iframe.dataset = {
"original": srcToLoad
"src": srcToLoad
};
iframe.setAttribute("src", preloadedSrc);
setSources(iframe, lazyloadSettings);
expect(iframe).toHaveAttributeValue("src", srcToLoad);
});
test("...with initial value in src and empty data-original", () => {
test("...with initial value in src and empty data-src", () => {
iframe.dataset = {
"original": ""
"src": ""
};
iframe.setAttribute("src", preloadedSrc);
setSources(iframe, lazyloadSettings);
expect(iframe).toHaveAttributeValue("src", preloadedSrc);
});
});

describe("_setSources for background image", () => {
describe("setSources for background image", () => {
let element;
let img100 = "http://placehold.it/100x100";
let img200 = "http://placehold.it/200x200";
Expand All @@ -113,15 +113,15 @@ describe("_setSources for background image", () => {

test("...with initially empty style attribute", () => {
element.dataset = {
"original": img200
"src": img200
};
setSources(element, lazyloadSettings);
// Test cheating: bug in JsDOM doesn't return the url("") with quotes inside
expect(element.style.backgroundImage).toBe(`url(${img200})`);
});
test("...with initially present style attribute", () => {
element.dataset = {
"original": img100
"src": img100
};
element.style = {
padding: "1px"
Expand All @@ -132,7 +132,7 @@ describe("_setSources for background image", () => {
});
test("...with initially present style and background", () => {
element.dataset = {
"original": img200
"src": img200
};
element.style = {
padding: "1px",
Expand Down Expand Up @@ -160,16 +160,16 @@ describe("setSourcesForPicture", () => {
});

test("...with initially empty srcset", () => {
source1.dataset = {"originalSet": img200};
source2.dataset = {"originalSet": img400};
source1.dataset = {"srcset": img200};
source2.dataset = {"srcset": img400};
setSourcesForPicture(img, lazyloadSettings);
expect(source1).toHaveAttributeValue("srcset", img200);
expect(source2).toHaveAttributeValue("srcset", img400);
});

test("...with initial value in srcset", () => {
source1.dataset = {"originalSet": img200};
source2.dataset = {"originalSet": img400};
source1.dataset = {"srcset": img200};
source2.dataset = {"srcset": img400};
source1.setAttribute("srcset", img1);
source2.setAttribute("srcset", img1);
setSourcesForPicture(img, lazyloadSettings);
Expand All @@ -178,8 +178,8 @@ describe("setSourcesForPicture", () => {
});

test("...with initial value in srcset and empty data-srcset", () => {
source1.dataset = {"originalSet": ""};
source2.dataset = {"originalSet": ""};
source1.dataset = {"srcset": ""};
source2.dataset = {"srcset": ""};
source1.setAttribute("srcset", img200);
source2.setAttribute("srcset", img400);
setSourcesForPicture(img, lazyloadSettings);
Expand Down
Loading

0 comments on commit 8db1570

Please sign in to comment.