feat: 优化小故事静态资源懒加载 (#1258)

* 优化小故事资源加载 * feat: 优化小故事资源加载
mipengine · Oct 10, 2018 · 0bb40eb · 0bb40eb
1 parent cef5ce3
commit 0bb40eb
Show file tree

Hide file tree

Showing 10 changed files with 459 additions and 17 deletions.
diff --git a/sample/mip-story/preload.html b/sample/mip-story/preload.html
diff --git a/src/mip-story/README.md b/src/mip-story/README.md
@@ -8,14 +8,13 @@
 
 - 每个小故事可以包含多个段落（view），每个段落充满屏幕。用户操作翻页后，会看到下一个段落。
 - 每个段落又可以包含多个层（layer），单个层可以设置布局模式，如多行布局，左右布局，图片拉伸布局等。
-- 元素（element）是资源素材，如背景图，主标题，详细描述等。在 `<h1>`、`<p>`、`<mip-img>` 等标签中声明。
+- 元素（element）是资源素材，如背景图，主标题，详细描述等。在 `<h1>`、`<p>`、`<mip-story-img>` 等标签中声明。
 
 | 标题   | 内容                                       |
 | ---- | ---------------------------------------- |
 | 类型   | 通用                                       |
 | 支持布局 | responsive,fixed-height,fill,container,fixed |
-
-| 所需脚本|https://c.mipcdn.com/static/v1/mip-story/mip-story.js<br>https://c.mipcdn.com/static/v1/mip-share/mip-share.js<br>https://c.mipcdn.com/static/v1/mip-stats-baidu/mip-stats-baidu.js<br>https://c.mipcdn.com/static/v1/mip-scrollbox/mip-scrollbox.js<br>https://c.mipcdn.com/static/v1/mip-scrollbox/mip-scrollbox.js
+| 所需脚本|https://c.mipcdn.com/static/v1/mip-story/mip-story.js<br>https://c.mipcdn.com/static/v1/mip-share/mip-share.js<br>https://c.mipcdn.com/static/v1/mip-stats-baidu/mip-stats-baidu.js
 ## 示例
 ```html
 <style mip-custom>
@@ -66,15 +65,15 @@
     </script>
     <mip-story-view auto-advancement-after="3s">
         <mip-story-layer template="fill" animate-in="scale-in" animate-in-duration="3s">
-            <mip-img width="480" class="fade-in-scale" height="720" src="https://www.mipengine.org/static/img/sample_02.jpg"></mip-img>
+            <mip-story-img width="480" class="fade-in-scale" height="720" src="https://www.mipengine.org/static/img/sample_02.jpg"></mip-story-img>
         </mip-story-layer>
         <mip-story-layer>
             <h1 animate-in="fade-in-right">用 MIP 来讲述你的故事！</h1>
         </mip-story-layer>
     </mip-story-view>
     <mip-story-view>
         <mip-story-layer template="fill" animate-in="scale-in" animate-in-duration="3s">
-            <mip-img width="480" class="fade-in-scale" height="720" src="https://www.mipengine.org/static/img/sample_02.jpg"></mip-img>
+            <mip-story-img width="480" class="fade-in-scale" height="720" src="https://www.mipengine.org/static/img/sample_02.jpg"></mip-story-img>
         </mip-story-layer>
         <mip-story-layer>
             <h1 animate-in="fade-in-right">用 MIP 来讲述你的故事！</h1>

diff --git a/src/mip-story/mip-story-bookend.js b/src/mip-story/mip-story-bookend.js
@@ -67,7 +67,7 @@ define(function (require) {
             "fromUrl": ""
         }
     ]
-    
+
     MIPStoryBackEnd.prototype.build = function () {
         var data = this.storyConfig;
         var replayStats = encodeURIComponent(
@@ -112,8 +112,9 @@ define(function (require) {
                 innerTpl += ''
                     +    '<a ondragstart="return false;" ondrop="return false;" href="' + item.url
                     +       '" class="recommend-item" data-stats-baidu-obj="' + recommendStats + '">'
-                    +       '<div class="mip-backend-preview" style="background-image:url('
-                    +       (item.cover || '') + ');"></div>'
+                    +       '<div class="mip-backend-preview"> <mip-story-img src='
+                    +           (item.cover || " ")
+                    +       '></mip-story-img></div>'
                     +       '<div class="recommend-detail">'
                     +           '<span>' + (item.title || '') + '</span>'
                     +           '<span class="item-from" data-src="' + item.fromUrl + '">' + (item.from || '') + '</span>'

diff --git a/src/mip-story/mip-story-config.js b/src/mip-story/mip-story-config.js
@@ -45,6 +45,9 @@ define(function (require) {
     // 熊掌号api
     var MSITEAPI = 'https://msite.baidu.com/home/bar?office_id=';
 
+    // 预加载页数
+    var PRELOAD_PAGES = 2;
+
     return {
         MIP_I_STORY_STANDALONE: MIP_I_STORY_STANDALONE,
         PAGE_ROLE: PAGE_ROLE,
@@ -53,6 +56,7 @@ define(function (require) {
         SWITCHPAGE_THRESHOLD: SWITCHPAGE_THRESHOLD,
         DIRECTIONMAP: DIRECTIONMAP,
         PAGE_STATE: PAGE_STATE,
-        MSITEAPI: MSITEAPI
+        MSITEAPI: MSITEAPI,
+        PRELOAD_PAGES: PRELOAD_PAGES
     }
 });
diff --git a/src/mip-story/mip-story-img.js b/src/mip-story/mip-story-img.js
@@ -0,0 +1,50 @@
+/**
+ * @file mip-story-jsmpeg 组件
+ * @author
+ */
+
+define(function (require) {
+    'use strict';
+
+    var customElement = require('customElement').create();
+    var util = require('util');
+    var dm = util.dom;
+
+    function getAttributeSet(attributes) {
+        var attrs = {};
+        Array.prototype.slice.apply(attributes).forEach(function (attr) {
+            attrs[attr.name] = attr.value;
+        });
+        return attrs;
+    }
+
+    function getJsonString(attrs) {
+        var attrString = '';
+        for (var prop in attrs){
+            attrString += prop + '=' + attrs[prop] + ' ';
+        }
+        return attrString
+    }
+
+    customElement.prototype.initStoryImg = function () {
+        this.attributes = getAttributeSet(this.element.attributes);
+        var attrString = getJsonString(this.attributes);
+        var imgHtml = '<mip-img ' + attrString + '></mip-img>';
+        var storyImg = dm.create(imgHtml);
+        this.element.parentNode.insertBefore(storyImg, this.element);
+    }
+
+    customElement.prototype.attributeChangedCallback = function () {
+        if (this.element.hasAttribute('preload')) {
+            this.initStoryImg();
+        }
+    };
+
+    customElement.prototype.firstInviewCallback = function () {
+    };
+
+    /* eslint-disable */
+    MIP.registerMipElement('mip-story-img', customElement);
+
+    return customElement;
+});
diff --git a/src/mip-story/mip-story-slider.js b/src/mip-story/mip-story-slider.js
@@ -15,6 +15,7 @@ define(function (require) {
     var SWITCHPAGE_THRESHOLD = constConfig.SWITCHPAGE_THRESHOLD;
     var CURRENT = constConfig.PAGE_STATE.current;
     var ACTIVE = constConfig.PAGE_STATE.active;
+    var preloadPages = constConfig.PRELOAD_PAGES;
     var STYLE = 'style';
     var screenWidth = viewport.getWidth();
     var screenHeight = viewport.getHeight();
@@ -55,6 +56,9 @@ define(function (require) {
         'optValue': '翻到了分享页'
     };
 
+    // 预加载
+    var hasPreload = preloadPages;
+
     // 兼容 touch 、 mouse 事件
     var dragStartBind = null;
     var dragMoveBind = null;
@@ -546,13 +550,28 @@ define(function (require) {
     };
 
     MIPStorySlider.prototype.setCurrentPage = function (status) {
-        for (var i = 0; i < storyContain.length; i++) {
+        var storyContainLength = storyContain.length;
+        for (var i = 0; i < storyContainLength; i++) {
             var currentPage = storyContain[i];
             if (i === this.currentIndex) {
+                // 埋点
                 if (window._hmt && pageViewed.indexOf(i) === -1) {
                     var pageRole = currentPage.getAttribute('page-role');
                     this.triggerStats(i, pageRole);
                 }
+
+                // 预加载
+                if (hasPreload - i <= preloadPages && i < storyContainLength - preloadPages) {
+                    storyContain[i + preloadPages].setAttribute('preload', '');
+                    hasPreload++;
+                    if (hasPreload == storyContainLength) {
+                        var storyImgs = storyContain[hasPreload -1].querySelectorAll('mip-story-img')
+                        for (var i = 0; i < storyImgs.length; i++) {
+                            storyImgs[i].setAttribute('preload', '')
+                        }
+                    }
+                }
+
                 // 设置当前页面为current状态
                 this.setViewStatus(true, CURRENT, currentPage);
             } else {
@@ -563,7 +582,7 @@ define(function (require) {
             if (this.hasStatus(ACTIVE, currentPage)) {
                 this.setViewStatus(false, ACTIVE, currentPage);
             }
-
+            
         }
     };
 

diff --git a/src/mip-story/mip-story-video.js b/src/mip-story/mip-story-video.js
@@ -132,9 +132,14 @@ define(function (require) {
         }
     };
 
+    customElement.prototype.attributeChangedCallback = function () {
+        if (this.element.hasAttribute('preload')) {
+            this.initStoryVideoElement();
+        }
+    };
 
     customElement.prototype.firstInviewCallback = function () {
-        this.initStoryVideoElement();
+        // this.initStoryVideoElement();
     };
 
     function getAttributeSet(attributes) {

diff --git a/src/mip-story/mip-story-view.js b/src/mip-story/mip-story-view.js
@@ -9,6 +9,7 @@ define(function (require) {
     var customElement = require('customElement').create();
     var Audio = require('./audio');
     require('./mip-story-video');
+    require('./mip-story-img');
     var timeStrFormat = require('./animation-util').timeStrFormat;
     var AnimationManager = require('./animation').AnimationManager;
     var hasAnimations = require('./animation').hasAnimations;
@@ -241,8 +242,7 @@ define(function (require) {
         this.element.setAttribute('page-role', constConfig.PAGE_ROLE.contentPage);
     }
 
-    customElement.prototype.initView = function () {
-
+    customElement.prototype.initMedia = function () {
         this.audio = new Audio();
         this.canvasVideo = this.element.querySelectorAll('mip-story-video');
         this.hasStoryVideo = !!this.canvasVideo.length;
@@ -257,9 +257,29 @@ define(function (require) {
         }
     };
 
+    customElement.prototype.initStoryStatic = function () {
+        var storyStatic = this.element.querySelectorAll('mip-story-img, mip-story-video');
+        for (var i = 0; i < storyStatic.length; i++) {
+            storyStatic[i].setAttribute('preload', '');
+        }
+    }
+
+    // 有preload属性时, 自动为所包含的静态元素添加preload属性
+    customElement.prototype.attributeChangedCallback = function () {
+        if (this.isPreload) {
+            return;
+        }
+
+        if (this.element.hasAttribute('preload')) {
+            this.isPreload = true;
+            this.initStoryStatic();
+            this.initMedia();
+            this.pauseAllMedia();
+        }
+    };
+
     customElement.prototype.firstInviewCallback = function () {
-        this.initView();
-        this.pauseAllMedia();
+        this.isPreload = false;
         this.setPageRole();
     };
 

diff --git a/src/mip-story/mip-story.js b/src/mip-story/mip-story.js
@@ -11,6 +11,7 @@ define(function (require) {
     require('./mip-story-layer');
     var constConfig = require('./mip-story-config');
     var MIP_I_STORY_STANDALONE = constConfig.MIP_I_STORY_STANDALONE;
+    var preloadPages = constConfig.PRELOAD_PAGES;
     var Audio = require('./audio');
     var ShareLayer = require('./mip-story-share');
     var HintLayer = require('./mip-story-hint');
@@ -76,6 +77,9 @@ define(function (require) {
 
     MIPStory.prototype.initStoryViews = function () {
         this.storyViews = this.element.querySelectorAll('mip-story-view');
+
+        // 初始化预加载
+        this.initPreload()
     };
 
     MIPStory.prototype.initStoryContain = function () {
@@ -167,7 +171,13 @@ define(function (require) {
         });
     }
 
-
+    // 预加载相关
+    MIPStory.prototype.initPreload = function () {
+        var storyViewData = this.storyViews;
+        for (var i = 0; i <= preloadPages; i++) {
+            storyViewData[i].setAttribute('preload','')
+        }
+    };
 
     // story组件的初始化
     MIPStory.prototype.init = function () {

diff --git a/src/mip-story/mip-story.less b/src/mip-story/mip-story.less
@@ -947,6 +947,7 @@ mip-story-layer[template=thirds] {
         background-size: cover;
         background-repeat: no-repeat;
         background-position: 0 0;
+        overflow: hidden;
         .mip-backend-preview-thumbnail {
             width: 122px;
             height: 88px;