ここでは、今日、私はいくつかの主要なモジュールを共有します：
- ページのローディング効果の前に完成したロード（実際のケース）
- ページのJSをロードされているかどうかを確認する方法
- jsがVUE機能にロードして実行
し、 - Window.onloadは、リスナーを結合し、機能ページの読み込みを複数を達成するために処理します
住人私と一緒に来てください。
jsは、ページの読み込みを達成ローディング効果の前に完了しています
いくつかの単語の男は、コードの最初の、言いました：
//获取浏览器页面可见高度和宽度
var _PageHeight = document.documentElement.clientHeight,
_PageWidth = document.documentElement.clientWidth;
//计算loading框距离顶部和左部的距离（loading框的宽度为216px，高度为61px）
var _LoadingTop = _PageHeight > 61 ? (_PageHeight - 61) / 2 : 0,
_LoadingLeft = _PageWidth > 216 ? (_PageWidth - 216) / 2 : 0;
//在页面未加载完毕之前显示的loading Html自定义内容
var _LoadingHtml = '<div id="loadingDiv" style="position:absolute;left:0;width:100%;height:' + _PageHeight + 'px;top:0;background:#f3f8ff;opacity:0.8;filter:alpha(opacity=80);z-index:100000;"><div style="position: absolute; cursor1: wait; left: ' + _LoadingLeft + 'px; top:' + _LoadingTop + 'px; width: auto; height: 57px; line-height: 57px; padding-left: 50px; padding-right: 5px; background: #fff url(\'../loading.gif\') no-repeat scroll 5px 10px; border: 2px solid #95B8E7; color: #696969; font-family:\'Microsoft YaHei\';">页面(主要是图片资源)加载中，请诸位稍等...</div></div>';
//呈现loading效果
document.write(_LoadingHtml);
//监听加载状态改变
document.onreadystatechange = completeLoading;
//加载状态为complete时移除loading效果
function completeLoading() {
if (document.readyState == "complete") {
var loadingMask = document.getElementById('loadingDiv');
loadingMask.parentNode.removeChild(loadingMask);
}
}
このセクションのJSコードがします<head>缶続く;
このコードは実際には何も言うことはありません-カスタムコンテンツ、その最初のショーまで、待ち時間はreadyStateのがなるまでを完全ロードプロンプトボックスのサイズを設定するためには、ページの幅と高さを取得しますその後、完全なDOMツリーから削除。
自分のスタイルに合わせて変更することができます負荷パターンの効果は、loading.gifこの画像は、オンラインで見つけるために、自分自身であることが必要です。
JSは、ページがロードされているかどうかを判断します
これまでのところ、最も効果的な方法は、上記のコードで使用される方法であると思われる - 、決意のreadyStateのドキュメントです：
document.onreadystatechange=function(){
if(document.readyState==='complete'){
//...
}
}
実行方法の完了後JSページのロード
一般的に使用されるいくつかの方法についてのトーク：
window.onload=function(){}
if('addEventListener' in document){
document.addEventListener('DOMContentLoaded',function(){
//...
},false);
}
document.onreadystatechange=function(){
if(document.readyState==='complete'){
//...
}
}
ページがロードされた後Vueの実行方法
mounted(){
this.$nextTick(()=>{
//确保dom异步加载完毕
});
}
Window.onloadは、リスナーを結合し、機能ページの読み込みを複数を達成するために処理します
あなたは要素の同じイベントに対して複数のハンドラを追加または削除することができます：利点を監視言及されるべきです。私たちは、欠陥が一度だけのページでwindow.onloadイベントをロードされる前に言いました。使用されるリスナーの方法は、例えば、の関数window.onloadの複数として監視することができます。
function addLoadListener(fn){
if(typeof window.addEventListener != 'undefined'){
window.addEventListener('load',fn,false)
}else if(typeof document.addEventListener){
document.addEventListener('load',fn,false)
}else if(typeof window.attachEvent != 'undefined'){
window.attachEvent('load',fn）
}else{
var oldfn = window.onload
if(typeof window.onload != 'function'){
window.onload = fn
}else{
window.onload = function(){
oldfn()
fn()
}
}
}
}
この関数は、各リスナーのブラウザのサポートを決定するためにif文を使用して取引をしました。リスナーがサポートされていない場合、デフォルトの方法は、window.onloadをロードしました。
