ページが完全に読み込まれる前に要素にjQueryエフェクトを適用するにはどうすればよいですか？

jQueryを使って要素のheightをカスタムしたいと思っています。 heightが変更されていますが、毎回ページの読み込み時に効果（瞬き効果など）が表示されています。この問題を解決するには？ DIVのページロードの高さにページが完全に読み込まれる前に要素にjQueryエフェクトを適用するにはどうすればよいですか？

$(document).ready(function() { 
 
    $('.jQuery-Container').height('100px'); 
 
});

.jQuery-Container { 
 
    background-color: Red; 
 
    height: 700px; 
 
    width: 200px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="jQuery-Container"> 
 
    This is text..!! 
 
</div>

ページが完全にロードされた後に変更が、されています。ページが完全に読み込まれる前に高さを変更したい。

私のjsfiddle hereを見ることができます。

出典

2017-04-27 Rohit Sharma

あなたがすることはできません。 JSはJSを実行する前にDOMをロードする必要があります。これがFOUC（非構造化コンテンツのフラッシュ）を見る理由です。これを避けるには、UIの更新にCSSを使用してください。これはページライフサイクルの早い段階で適用されるため、 –

@Peteでも保証されません。 –

@Rory McCrossanこのようにする別の方法がありますか？私は効果が条件に依存しているので、CSSを使用することはできません。ですから、代わりにjQueryを使用する必要があります。 –

すぐ要素の後にスクリプトを実行する場所あなたは、このように行うことができますを行った後、次に隠されたDIV作りますそれが普通のjavascriptである限り、動作します。

.JS-Container { 
 
    background-color: Red; 
 
    height: 700px; 
 
    width: 200px; 
 
}

<head> 
 
    <script> 
 
    function changeThis(sel) { 
 
     document.querySelector(sel).style.cssText = 'height: 100px;'; 
 
    } 
 
    </script> 
 
</head> 
 
<body> 
 

 
    <div class="JS-Container"> 
 
    This is a sample text 
 
    </div> 
 
    <script>changeThis('.JS-Container');</script> <!-- this will run before page is fully 
 
               loaded, so no "blink" will occur --> 
 

 

 
</body>

出典

2017-04-27 10:25:41 LGSon

しかし、あなたは2つの 'divs'を作っています。あなたはテキストを変更していますが、divの外観を変更したいのですが（あるdivでのみ） –

実行時に要素をどのように変更していますか？ –

@RohitSharma私はあなたのまったく同じサンプルを示して、私の答えを再び更新しました。実行時に要素が変更されているのはどういう意味ですか？_ – LGSon

は、あなたが最初にあなたのjqueryのロジックは、divの表示 CSS

.jQuery-Container { 
    background-color: Red; 
    height: 700px; 
    width: 200px; 
    display:none; 
}

$(document).ready(function(){ 
    $('.jQuery-Container').height('100px').show(); 
});

出典

2017-04-27 10:18:13

ページが完全に読み込まれる前に要素にjQueryエフェクトを適用するにはどうすればよいですか？

答えて

関連する問題