1. 程式人生 > >頁面加載完就執行的設置?

頁面加載完就執行的設置?

ins tag pda ini per tick 執行函數 nload 實現

在JS中,如果希望在頁面加載完成後執行某些操作的話,一般的寫法如下:

window.onload = function(){// some thing to do};

但 是,onload函數的執行並不是我們通常所理解的瀏覽器構建完html頁面對應的DOM樹後立刻執行,而是要等到頁面中所引用的圖片等外部資源 完全下載完成後並且在瀏覽器中顯示才執行,也就是說,如果頁面中包括很多圖片或者圖片很大時將導致onload函數執行時間會被推遲很久,頁面中基於 onload的特效或者其它相關內容將並不立刻可用,導致用戶體驗差。JQUERY的提供了一個自己的類似onload方式,通過該方法實現的頁面加載後 執行函數將在瀏覽器構建完DOM樹後立刻執行,而並不需要等待圖片等外部資源下載完成。

可以在body標簽中設置onload="init()"

並引入js代碼:

<script>
var canvas, stage, exportRoot;

function init() {
createjs.MotionGuidePlugin.install();

canvas = document.getElementById("canvas");
images = images||{};

var loader = new createjs.LoadQueue(false);
loader.addEventListener("fileload", handleFileLoad);
loader.addEventListener("complete", handleComplete);
loader.loadManifest(lib.properties.manifest);
}

function handleFileLoad(evt) {
if (evt.item.type == "image") { images[evt.item.id] = evt.result; }
}

function handleComplete() {
exportRoot = new lib.flower();

stage = new createjs.Stage(canvas);
stage.addChild(exportRoot);
stage.update();

createjs.Ticker.setFPS(lib.properties.fps);
createjs.Ticker.addEventListener("tick", stage);
}
</script>

頁面加載完就執行的設置?