From f841201f28f81138f9494c5909504c00090f841a Mon Sep 17 00:00:00 2001
From: youluna <njuzhaoguoyan@foxmail.com>
Date: Thu, 13 Jun 2019 14:34:02 +0800
Subject: [PATCH] fix(Slider): lazyLoad pre and next pics, close #706

---
 src/slider/slick/inner-slider.jsx  |  6 ++++++
 src/slider/slick/mixins/helpers.js | 29 ++++++++++++++++++++---------
 test/slider/index-spec.js          | 30 +++++++++++++++---------------
 3 files changed, 41 insertions(+), 24 deletions(-)

diff --git a/src/slider/slick/inner-slider.jsx b/src/slider/slick/inner-slider.jsx
index 14f94b6c4b..f350e29de0 100644
--- a/src/slider/slick/inner-slider.jsx
+++ b/src/slider/slick/inner-slider.jsx
@@ -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);
                 }
             }
 
diff --git a/src/slider/slick/mixins/helpers.js b/src/slider/slick/mixins/helpers.js
index 65e7d5a28a..6ebfa7dde1 100644
--- a/src/slider/slick/mixins/helpers.js
+++ b/src/slider/slick/mixins/helpers.js
@@ -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;
@@ -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(
diff --git a/test/slider/index-spec.js b/test/slider/index-spec.js
index 6c113d1503..394af329dc 100644
--- a/test/slider/index-spec.js
+++ b/test/slider/index-spec.js
@@ -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', () => {
@@ -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', () => {
@@ -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}
@@ -137,7 +137,7 @@ describe('slider', function() {
         });
 
         it('should fade', () => {
-            return co(function*() {
+            return co(function* () {
                 wrapper = mount(
                     <Slider
                         infinite={false}
@@ -226,7 +226,7 @@ describe('slider', function() {
             </div>
         ));
 
-        beforeEach(() => {});
+        beforeEach(() => { });
 
         afterEach(() => {
             if (wrapper) {
@@ -273,7 +273,7 @@ describe('slider', function() {
         });
 
         it('too more slidesToShow ', () => {
-            return co(function*() {
+            return co(function* () {
                 const settings = {
                     slidesToShow: 5,
                     slidesToScroll: 10,
@@ -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(
@@ -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
@@ -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
@@ -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}
@@ -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}
@@ -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
@@ -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}
@@ -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,