Blend 頁面預(yù)加載

概述

Layer和LayerGroup接口中預(yù)留有頁面預(yù)加載參數(shù)。開發(fā)者通過配置該參數(shù)可以控制頁面在后臺預(yù)加載、控制頁面呈現(xiàn)，頁面切換速度更快，增強了用戶在移動端上獲得的瀏覽體驗。

Layer預(yù)加載

BlendUI中Layer提供了預(yù)加載參數(shù)。配置方法如下：

Blend.ui.layerInit("頁面id",function(dom){
    var layer = new Blend.ui.Layer({
         "id": "layerId",
         "url": "layer.html",
         "active": false   //預(yù)加載參數(shù)
    });
});

一個實例：

document.addEventListener("blendready", function () {
    Blend.ui.layerInit("0", function (dom) {
        $('#btn-preload', dom).click(function () {
            var layer1 = new Blend.ui.Layer({
                "id": "layerId1",
                "url": "layer.html",
                "active": false,   //禁止預(yù)加載
                "duration":200
            });
            layer1.in();  //當禁止預(yù)加載時，需通過in()方法顯示
        });
        $('#btn-unpreload', dom).click(function () {
            var layer2 = new Blend.ui.Layer({
                "id": "layerId2",
                "url": "layer.html",
                "active": true,  //允許預(yù)加載，頁面立即呈現(xiàn)
                "duration":200
            });
        });
    });
});

當active參數(shù)值為false時，如果需要顯示頁面,需要通過in()方法；當active參數(shù)值為true時，頁面將直接加載顯示。

LayerGroup預(yù)加載

BlendUI中LayerGroup提供了預(yù)加載參數(shù)。配置方法如下：

Blend.ui.layerInit("頁面id",function(dom){
    var tabs = new Blend.ui.LayerGroup({
          id: "tabs",
          layers: [{
               "id": 'contentA',
               "url": 'contentA.html',
               "autoload": true  //預(yù)加載參數(shù)
          }]
    });
});

一個實例：

document.addEventListener("blendready", function () {
    Blend.ui.layerInit("0", function (dom) {
        var tabs = new Blend.ui.LayerGroup({
            id: "tabs",
            layers: [
                {
                    "id": 'contentA',
                    "url": 'contentA.html',
                    "active": true
                },
                {
                    id: 'contentB',
                    "url": 'contentB.html',
                    "autoload": false //禁止預(yù)加載
                }
            ]
        });
    });
});

頁面B禁用了預(yù)加載，僅當用戶滑動到頁面B時才進行頁面加載；如果頁面B有大量內(nèi)容需要加載時，可以設(shè)置autoload參數(shù)值為true，頁面B將會在用戶瀏覽其他頁面時預(yù)加載，減少了用戶在頁面切換瀏覽時所需等待的時間。

示例源碼

在線獲取Layer預(yù)加載源碼

在線獲取LayerGroup預(yù)加載源碼