如何在頁面完全加載之前將jQuery效果應用於元素？

我想使用jQuery自定義元素height。 height正在更改，但每次頁面加載時都會顯示效果（如閃爍效果）。如何解決這個問題呢？如何在頁面完全加載之前將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>

在DIV的頁面加載高度正在改變，但頁面後是滿載。我想在頁面完全加載之前更改高度。您可以看到我的jsfiddle here。

來源

2017-04-27 Rohit Sharma

你不能。在JS可以執行任何指令之前，DOM必須被加載。這就是爲什麼你看到FOUC（未格式化內容的閃光）。爲了避免這種情況，使用CSS來更新UI，因爲這是在頁面生命週期早期應用的 –

@Pete，即使這樣也不能保證。 –

@Rory McCrossan是否有另一種方法來實現這種效果。我不能使用CSS，因爲效果取決於條件。所以需要使用jQuery來代替。 –

你可以做這樣的，在這裏你的元素之後立即運行的腳本，只要它是純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

但是你做了兩個'divs'。你正在改變文本，我想改變div的外觀（只在一個div中） –

但是它在運行時如何改變元素？ –

@RohitSharma我再次更新了我的答案，顯示了完全相同的樣本。 _how它在運行時進行的元素的變化你是什麼意思？_ – LGSon

讓你DIV先隱藏然後後您的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效果應用於元素？

回答

相關問題