整個滑跳負載 - AnythingSlider

我使用AnythingSlider放置了一個新的網站在這個開發內容：整個滑跳負載 - AnythingSlider

http://sitedev.lcadfiles.com/interactive_barrett.html

當給定頁面上的滑塊首先加載，有輕微的跳躍（整個滑塊，箭頭等在移動到正確的位置之前移動幾個像素）。登陸後，這一切似乎工作正常。這個轉變看起來並不是特定於瀏覽器的，因爲它出現在我的老舊機器上，有4種不同的瀏覽器（以及各種瀏覽器版本）。

有什麼我設置錯了嗎？我認爲它可能在全球的某個地方，比如anythingSlider.js（或者.css--儘管這似乎不太可能），但沒有看到任何突出的東西。

來源

2012-06-19 Todd

確保沒有對'ul'和'li'的設置任何填充或利潤率 - 基本上確保重置你的CSS。 – Mottie

有同樣的問題。一個快速的解決方法（適用於我）。

例如。你有像下面的html代碼，添加一個style =「visibility：hidden;」到您的anythingslider容器。

<div id="slider_nest" style="visibility:hidden;"> 
    <ul id="your_anythingslider"> 
    ... 
    </ul> 
</div>

在js代碼中，當文檔準備好時將樣式更改爲可見。（jQuery）

jQuery(document).ready(function($) { 
    $('#slider_nest').css('visibility', 'visible'); 
    ... 
    $('#your_anythingslider').anythingslider(); 
    ... 
}

希望它有幫助！

更新：使用加載器gif添加滑塊掩碼。

例如。在HTML中，你將有類似如下：

<div id="slider_mask" style="background: #000 url('ajax-loader.gif') no-repeat center;  display:block; height:568px; width:1050px; margin:0 auto;"> 
</div> 
<div id="slider_nest" style="display:none; height:568px; width:1050px; margin:0 auto;"> 
    <ul id="your_anythingslider"> 
    ... 
    </ul> 
</div>

在js

現在（的JQuery）：

jQuery(document).ready(function($) { 
    $('#slider_mask').hide(); 
    $('#slider_nest').css({'display':'block'}); 
    ...

來源

2012-11-21 00:49:48 user1310312

您還可以使用顯示屬性來替換可見性。在加載大量幻燈片的情況下，您也可以使用loader.gif添加滑塊蒙版，請參閱更新 – user1310312

OMG，這次終於解決了我們的問題！謝謝。

由於我使用的是自定義主題的WordPress插件，我不得不調整它有點像這樣：

<div id="slider_mask" style="background: #FFF url('ajax-loader.gif') no-repeat center;display:block; height:323px; width:940px; margin:0 auto;"> 
</div>

：

在的header.php文件簡碼前添加此

在的header.php文件的部分補充一點：

<script type="text/javascript"> 
    $(document).ready(function(){ 
    $('#slider_mask').hide();   
    $('.anythingSlider').css({'display':'block'}); 
}

一下添加到CSS文件：

.anythingSlider {display:none;}

來源

2013-01-25 18:12:10 Anja

整個滑跳負載 - AnythingSlider

回答

相關問題