fixed: 商品详情页图片白屏修改

 <div id="app" class="product-page" data-pid="{{pid}}" data-goods-id="{{goodsId}}">
     <div id="ssr">
         {{#product}}
-        <div class="ssr show-box first-box">
+        <div class="ssr show-box first-box carousel">
             <div class="image-swipe">
                 <div class="swipe-wrap">
                     <div class="ssr-swiper-container">
@@ -15,7 +15,7 @@
             </div>
         </div>
         {{#brandInfo}}
-        <div class="show-box zero-top-margin">
+        <div class="show-box zero-top-margin action">
             <div>
                 <ul class="item-action">
                     <li><a href="/product/shop/{{brand_domain}}"><i class="brand icon"></i><span class="action-text">

@@ -12,15 +12,6 @@ yoho.ready(() => {
         el: '#app',
         components: {
             app: app
-        },
-        created() {
-            setTimeout(() => {
-                let ssrs = document.getElementById('ssr');
-
-                if (ssrs) {
-                    ssrs.remove();
-                }
-            }, 100);
         }
     });
 });

 <template>
-    <div class="image-swipe">
+    <div class="image-swipe" v-if="allLoaded">
         <div class="swipe-wrap" @click.prevent="showcase()">
             <swiper :options="swiperOption" ref="swiper">
                 <swiper-slide v-for="item in goodsList" :key="item.title">
@@ -20,6 +20,7 @@
 <script>
     require('swiper/dist/css/swiper.css');
     import yoho from 'yoho';
+    import util from 'common/util';
     import vas from 'vue-awesome-swiper';
 
     export default {
@@ -39,7 +40,8 @@
                     onSlideChangeEnd(swiper) {
                         vm.setActiveSlide(swiper.realIndex)
                     }
-                }
+                },
+                allLoaded: false
             };
         },
         components: {
@@ -69,6 +71,37 @@
                 }
                 this.goodsList = temp;
                 this.slideCount = this.goodsList.length;
+            },
+            goodsList(goods) {
+                const preloadImg = (list, loaded) => {
+                    loaded = loaded || [];
+
+                    // 加载完成
+                    if(list.length === 0) {
+                        let $ssr = document.getElementById('ssr');
+                        $ssr && $ssr.remove();
+                        this.allLoaded = true;
+                        return;
+                    }
+
+                    let img = new Image();
+                    img.src = util.getImgUrl(list[0].image_url, '580', '770');
+
+                    if(img.complete) {
+                        loaded.push(img);
+                        list.shift();
+                        preloadImg(list, loaded);
+                    }
+                    else {
+                        img.onload = function() {
+                            loaded.push(img);
+                            list.shift();
+                            preloadImg(list, loaded);
+                        };
+                    }
+                };
+
+                preloadImg(goods[0].images_list);
             }
         },
         methods: {
@@ -133,9 +166,21 @@
             height: 770px;
         }
     }
-}
 
+    .show-box.carousel {
+        border-top: none;
+        border-bottom: none;
+    }
+    .show-box.info,
+    .show-box.action {
+        border-top: none;
+    }
 
+    .show-box.action {
+        padding-bottom: 0;
+        border-bottom: none;
+    }
+}
 
 .image-swipe {
     position: relative;

@@ -422,7 +422,6 @@
                 return result.data;
             }).then((data)=> {
                 if (data) {
-                    console.log(data)
                     // 读取商品详情
                     $.get(`/product/product/intro_${pid}.json`, {skn: data.product_skn}).then(intro => {
                         this.intro = intro;
@@ -520,6 +519,7 @@
     }
 
     .show-box.carousel {
+        border-top: none;
         border-bottom: none;
     }
     .show-box.info,