topic load

 <template>
-  <img v-lazy="currentSrc" :alt="alt" v-if="currentLazy" @error="onError">
+  <img v-lazy="currentSrc" :alt="alt" v-if="currentLazy" class="lazy-img" @error="onError">
   <img :src="currentSrc" :alt="alt" v-else lazy="" data-src="" @error="onError">
 </template>
 

@@ -101,11 +101,13 @@ export default {
     items(newList, oldList) {
       let list = newList.slice(oldList.length, newList.length);
 
-      this.loadItems(list, oldList.length).then(() => {
-        if (oldList.length < 2) {
-          this._updateList();
-        }
-      });
+      if (list.length) {
+        this.loadItems(list, oldList.length).then(() => {
+          if (oldList.length < 2) {
+            this._updateList();
+          }
+        });
+      }
     }
   },
   mounted() {
@@ -222,9 +224,9 @@ export default {
             k--;
           }
         }
-      });
 
-      return true;
+        return true;
+      });
     },
     loadItem(item, colIndex) {
       return new Promise(r => {

@@ -256,28 +256,42 @@ export default {
         this.$refs.scroll.clear();
       }
 
-      this.fetchTopicSimpleInfo({topicId: this.topicId}).then(res => {
-        let {topicName, topicImageUrl, topicDesc} = get(res, 'data') || {};
+      return this.load().then(() => {
+        this.$nextTick(() => {
+          this.$refs.scroll && this.$refs.scroll.init();
+        });
+      });
+    },
+    load() {
+      this.listPreCache = {};
+      return new Promise(resolve => {
+        let resNum = 0;
+        const apis = [
+          this.fetchTopicSimpleInfo({topicId: this.topicId}).then(res => {
+            if (res.code === 200) {
+              this.setPageShareInfo(get(res, 'data', {}));
+            }
 
-        if (this.share) {
-          document && (document.title = topicName || '话题');
-        }
+            if (!get(res, 'data.topicImageUrl')) {
+              this.headerAnimateStep = 100;
+            }
+          }),
+          this.fetchTopicRelatedArticles({topicId: this.topicId, page: 1}).then(res => {
+            if (res.code === 200) {
+              this.listPreCache[`${this.topicId}-1`] = res;
+            }
+          })
+        ];
 
-        if (this.share && !this.$yoho.isApp && res.code === 200) {
-          Share.setShareInfo({
-            title: topicName,
-            imgUrl: topicImageUrl,
-            desc: '我在有货的社区发现一个热门话题。' + topicDesc,
+        apis.forEach(api => {
+          api.then(() => {
+            if (++resNum >= apis.length) {
+              resolve();
+            }
           });
-        }
-
-        if (!topicImageUrl) {
-          this.headerAnimateStep = 100;
-        }
-
-        this.$nextTick(() => {
-          this.$refs.scroll && this.$refs.scroll.init();
         });
+
+        setTimeout(resolve, 500);
       });
     },
     async onFetch() {
@@ -289,26 +303,20 @@ export default {
 
       this.page = this.page || 1;
 
-      const result = await this.fetchTopicRelatedArticles({
-        topicId,
-        page: this.page
-      });
+      let result = get(this.listPreCache, `${this.topicId}-${this.page}`);
+
+      if (!result) {
+        result = await this.fetchTopicRelatedArticles({
+          topicId,
+          page: this.page
+        });
+      }
 
       let list = [];
 
       if (result.code === 200) {
         this.page++;
         list = get(result, 'data.detailList', []);
-
-        if (list.length) {
-          this.$sdk.getUser().then(user => {
-            if (user && user.uid) {
-              this.fetchArticleProductFavs({
-                articles: list
-              });
-            }
-          });
-        }
       } else {
         this.$createToast && this.$createToast({
           txt: result.message || '服务器开小差了',
@@ -318,7 +326,7 @@ export default {
       }
 
       return new Promise(resolve => {
-        if (this.topicInfo.viewModel === 1 && this.page <= 2) {
+        if (get(this.topicInfo, 'viewModel') === 1 && this.page <= 2) {
           list = [{topicHead: true}, ...list];
         }
 
@@ -350,6 +358,19 @@ export default {
         this.$refs.actionSheet.show(params);
       });
     },
+    setPageShareInfo({topicName, topicImageUrl, topicDesc}) {
+      if (this.share) {
+        document && (document.title = topicName || '话题');
+
+        if (!this.$yoho.isApp) {
+          Share.setShareInfo({
+            title: topicName,
+            imgUrl: topicImageUrl,
+            desc: '我在有货的社区发现一个热门话题。' + topicDesc,
+          });
+        }
+      }
+    },
     startReportShow() {
       let preview = null;
       let name = this.$yoho.isiOS ? 'iFP_ArticleList' : 'aFP_ArticleList';

@@ -611,6 +611,11 @@ ul {
     white-space: nowrap;
 }
 
+img.lazy-img {
+    opacity: 0;
+    transition: opacity 800ms ease-in-out;
+}
+
 img[lazy=loading] {
     opacity: 0.2;
 }