Skip to content

Commit

Permalink
fix(Slider): lazyLoad pre and next pics, close #706
Browse files Browse the repository at this point in the history
  • Loading branch information
@youluna
youluna committed Jun 13, 2019
1 parent 40de21d commit f841201
Show file tree
Hide file tree
Showing 3 changed files with 41 additions and 24 deletions.
6 changes: 6 additions & 0 deletions src/slider/slick/inner-slider.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -114,6 +114,12 @@ class InnerSlider extends React.Component {
for (let i = 0, j = React.Children.count(children); i < j; i++) {
if (i >= currentSlide && i < currentSlide + slidesToShow) {
lazyLoadedList.push(i);

const pre = i - 1 < 0 ? j - 1 : i - 1;
const next = i + 1 >= j ? 0 : i + 1;

lazyLoadedList.push(pre);
lazyLoadedList.push(next);
}
}

Expand Down
29 changes: 20 additions & 9 deletions src/slider/slick/mixins/helpers.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -255,11 +255,10 @@ const helpers = {
if (this.props.lazyLoad) {
let loaded = true;
const slidesToLoad = [];
const slidesLen = this.state.slideCount;

const sliderIndex =
targetSlide < 0
? this.state.slideCount + targetSlide
: currentSlide;
targetSlide < 0 ? slidesLen + targetSlide : currentSlide;

for (
let i = sliderIndex;
Expand All @@ -269,16 +268,28 @@ const helpers = {
let k = i;
if (rtl) {
k =
i >= this.state.slideCount
? this.state.slideCount * 2 - i - 1
: this.state.slideCount - i - 1;
i >= slidesLen
? slidesLen * 2 - i - 1
: slidesLen - i - 1;
}

loaded = loaded && this.state.lazyLoadedList.indexOf(k) >= 0;
if (!loaded) {
const pre = k - 1 < 0 ? slidesLen - 1 : k - 1;
const next = k + 1 >= slidesLen ? 0 : k + 1;

this.state.lazyLoadedList.indexOf(k) < 0 &&
slidesToLoad.push(k);
}
this.state.lazyLoadedList.indexOf(pre) < 0 &&
slidesToLoad.push(pre);
this.state.lazyLoadedList.indexOf(next) < 0 &&
slidesToLoad.push(next);
}

slidesToLoad.forEach(i => {
if (this.state.lazyLoadedList.indexOf(i) < 0) {
loaded = false;
}
});

if (!loaded) {
this.setState({
lazyLoadedList: this.state.lazyLoadedList.concat(
Expand Down
30 changes: 15 additions & 15 deletions test/slider/index-spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ import './index.scss';
Enzyme.configure({ adapter: new Adapter() });
const delay = time => new Promise(resolve => setTimeout(resolve, time));

describe('slider', function() {
describe('slider', function () {
this.timeout(0);

describe('render', () => {
Expand Down Expand Up @@ -80,7 +80,7 @@ describe('slider', function() {
{slides}
</Slider>
);
assert(wrapper.find('.custom-slick-item').length === 1);
assert(wrapper.find('.custom-slick-item').length === 3);
});

it('using prefixCls deprecated', () => {
Expand Down Expand Up @@ -119,7 +119,7 @@ describe('slider', function() {
});

it('should autoplay', () => {
return co(function*() {
return co(function* () {
wrapper = mount(
<Slider infinite={false} autoplay autoplaySpeed={200}>
{slides}
Expand All @@ -137,7 +137,7 @@ describe('slider', function() {
});

it('should fade', () => {
return co(function*() {
return co(function* () {
wrapper = mount(
<Slider
infinite={false}
Expand Down Expand Up @@ -226,7 +226,7 @@ describe('slider', function() {
</div>
));

beforeEach(() => {});
beforeEach(() => { });

afterEach(() => {
if (wrapper) {
Expand Down Expand Up @@ -273,7 +273,7 @@ describe('slider', function() {
});

it('too more slidesToShow ', () => {
return co(function*() {
return co(function* () {
const settings = {
slidesToShow: 5,
slidesToScroll: 10,
Expand Down Expand Up @@ -338,7 +338,7 @@ describe('slider', function() {
});

it('should click next/prev arrow', () => {
return co(function*() {
return co(function* () {
wrapper = mount(<Slider infinite={false}>{slides}</Slider>);
yield delay(100);
assert(
Expand All @@ -362,7 +362,7 @@ describe('slider', function() {
});

it('should hover next/prev arrow', () => {
return co(function*() {
return co(function* () {
wrapper = mount(<Slider infinite={false}>{slides}</Slider>);

wrapper
Expand Down Expand Up @@ -391,7 +391,7 @@ describe('slider', function() {
});

it('should click dots', () => {
return co(function*() {
return co(function* () {
wrapper = mount(<Slider infinite={false}>{slides}</Slider>);
assert(
wrapper
Expand Down Expand Up @@ -457,7 +457,7 @@ describe('slider', function() {
});

it('should click next/prev arrow', () => {
return co(function*() {
return co(function* () {
wrapper = mount(
<Slider rtl infinite={false}>
{slides}
Expand Down Expand Up @@ -487,7 +487,7 @@ describe('slider', function() {
});

it('should hover next/prev arrow', () => {
return co(function*() {
return co(function* () {
wrapper = mount(
<Slider rtl infinite={false}>
{slides}
Expand Down Expand Up @@ -521,7 +521,7 @@ describe('slider', function() {
});

it('should click dots', () => {
return co(function*() {
return co(function* () {
wrapper = mount(<Slider infinite={false}>{slides}</Slider>);
assert(
wrapper
Expand Down Expand Up @@ -566,7 +566,7 @@ describe('slider', function() {
});

it('should autoplay', () => {
return co(function*() {
return co(function* () {
wrapper = mount(
<Slider rtl autoplay infinite={false} autoplaySpeed={200}>
{slides}
Expand All @@ -590,11 +590,11 @@ describe('slider', function() {
{slides}
</Slider>
);
assert(wrapper.find('.custom-slick-item').length === 1);
assert(wrapper.find('.custom-slick-item').length === 3);
});

it('too more slidesToShow ', () => {
return co(function*() {
return co(function* () {
const settings = {
rtl: true,
slidesToShow: 2,
Expand Down

0 comments on commit f841201

Please sign in to comment.