ページのCSSスタイルがロードされるのを待ち、HTMLコンテンツがロードされ、スタイルが生成された後にそれを表示し、最初にコンテンツがロードされ、ユーザーエクスペリエンスが向上した後に徐々にスタイルをレンダリングすることによって引き起こされる不利な視覚効果を回避します。
Base-Loading.jsファイルを追加しました。コードは次のとおりです
//ブラウザページの可視高さと幅を取得するvar _pageheight.document.documentelement.clientheight、_pagewidth = document.documentelement.clientwidth; //上下の左からの読み込みボックス間の距離を計算します(ロードボックスの幅は215pxです。 ? (_pageheight -61) / 2:0、_loadingleft = _pagewidth> 215? (_PageWidth -215)/2:0; // gifアドレスのロードvar loadimagerul = "/content/loadjs/image/loading.gif"; // loadinghtmlページがロードされる前に表示されるカスタムコンテンツ_loadinghtml = '<div = "loadingdiv"スタイル= " + 'PX;背景:#F3F8FF;フィルター:Z-Index:<Div Style1:cursor1:' + _ loadingleft + 'px;パディング左翼:5px:#ffff url( '+repeat scroll 5px 12px#95b8e7:#696969; document.write(_loadinghtml); // roading stateを講演してdocument.onreadystatechange = completeLoading; //ロード状態が完全な機能であるときに読み込み効果を削除{)if(document.readyState == "complete"){var loadingmask = documentelementyid( 'loadingdiv'); LoadingMask.ParentNode.RemoveChild(LoadingMask);}}それを使用するとき、あなたはそれを頭に紹介するだけです
@*// JSアニメーション効果をロード*@
<Script src = "〜/content/loadjs/base-loading.js"> </script>
効果は次のとおりです。はじめに、HEMLのコンテンツとスタイルをロードすると、ロードアニメーションが表示されます。これは、抵抗した後に表示され、utter音が徐々にレンダリングされないように表示されます。
レンダリングが完了し、レンダリング画面が一度に表示されます。
上記は、編集者があなたに紹介したものです。 EasyUIがロードされた後、HTMLコンテンツのコンテンツスタイルのレンダリングが表示されます。私はそれが誰にでも役立つことを願っています。ご質問がある場合は、メッセージを残してください。編集者は、すべての人に時間内に返信します。 wulin.comのウェブサイトへのご支援ありがとうございます!