Blend 頁(yè)面預(yù)加載

概述

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

Layer預(yù)加載

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

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

一個(gè)實(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();  //當(dāng)禁止預(yù)加載時(shí)，需通過(guò)in()方法顯示
        });
        $('#btn-unpreload', dom).click(function () {
            var layer2 = new Blend.ui.Layer({
                "id": "layerId2",
                "url": "layer.html",
                "active": true,  //允許預(yù)加載，頁(yè)面立即呈現(xiàn)
                "duration":200
            });
        });
    });
});

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

LayerGroup預(yù)加載

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

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

一個(gè)實(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ù)加載
                }
            ]
        });
    });
});

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

示例源碼

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

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