如何讓我的元素更早jQuery風格？

我有我的網頁下面的HTML：如何讓我的元素更早jQuery風格？

<input id="htmlEdit" type="checkbox"/>

一旦頁面加載的複選框被使用wijmo樣式如下：

$(document).ready(function() { 
     var store = window.localStorage; 
     $('#htmlEdit').wijcheckbox();

這工作，但我有一個問題，即頁面顯示與元素樣式之間有1-2秒的延遲。在那段延遲期間，我看到了複選框的舊風格。

有沒有人知道我能做些什麼來減少這種延遲？我可以例如讓的wijcheckbox（）函數早些時候觸發嗎？我試着用#htmlEdit替換文件，但是沒有工作。

來源

2012-04-06 Samantha J T Star

這裏的挑戰在於，爲了通過javascript訪問DOM元素，DOM元素必須已經被瀏覽器解析，一旦它被瀏覽器解析，它可能已經在屏幕上顯示，除非它被設置爲不是可見。

這裏最好的答案是通過CSS樣式來控制初始外觀，因爲這將在解析項目時生效，並且它的第一個顯示將包含CSS樣式。

你可以運行一個給定對象的JavaScript的最快方法是立即把內嵌的JavaScript元素後的HTML源代碼：

<input id="htmlEdit" type="checkbox"/> 
<script type="text/javascript> 
$('#htmlEdit').wijcheckbox(); 
</script>

然而，這就會變得混亂很快，如果你不得不這樣做了很多並且散佈標記和JS通常不是一個好主意。因此，如果你不能用CSS來設計它，那麼你可能最好先將對象隱藏起來，然後在你的JS對其進行樣式化後才顯示它。

<input id="htmlEdit" type="checkbox" style="visibility: hidden" />

而且，然後讓它在你的JS看到你適當的風格之後：

$(document).ready(function() { 
    $('#htmlEdit').wijcheckbox().css("visibility", "visible"); 
})

注：我用visibility: hidden在這裏，而不是display: none因爲你的頁面將適當佈局和時複選框變得可見，頁面不會重新顯示導致事物跳動。這看起來比看到沒有複選框的佈局更好，然後在複選框變爲可見時看到它重新定位。如果新的複選框樣式顯着不同，則在添加新樣式時它可能會稍微移動一點，但在使用可見性時不會太顯着。

<input class="styledCheckbox" id="htmlEdit" type="checkbox">

CSS：

/* initially hidden until wij style is applied */ 
.styledCheckbox {visibility: hidden;}

的Javascript：

$(document).ready(function() { 
    // add style to all checkboxes and make them visible 
    $('.styledCheckbox').wijcheckbox().css("visibility", "visible"); 
})

來源

2012-04-06 16:32:28 jfriend00

感謝這麼

如果你有一大堆的這些，你可以把它與一個一流的自動化非常花時間給出一個很好的答案。 – 2012-04-06 16:40:41

沒有什麼可以做，以減少文件加載時間的，但你可以試試這個：

CSS：

#htmlEdit { 
    display: none; 
}

的Javascript：

$(document).ready(function() { 
    var store = window.localStorage; 
    $('#htmlEdit').wijcheckbox(); 
    $('#htmlEdit').show(); 
});

隱藏元素直到它的樣式正確。

來源

2012-04-06 16:23:26

如何讓我的元素更早jQuery風格？

回答

相關問題