完全DOM加載后嚴格執行jQuery操作

Question

我正在使用jquerynewsticker以新聞自動收錄方式顯示數字π的100,000個數字。 如果我打開了我的Chrome檢查器，我可以看到頁面從上到下加載，但是數字之后，以及它后面的所有JS，都會呈現黑色幾秒鍾，然后才變為默認顏色。 但是，腳本已經開始運行，正如您在測試頁面上看到的那樣： http ： //marckremers.com/pi/ticker/它似乎運行，但沒有渲染。 如果我減少數字的大小，它的工作原理。 所以這顯然是裝載不完整的問題。

如果所有內容都已100％加載，我怎么能強制腳本才能播放？

Answer 1

看看你的網站，我看到你加載了自動收報機插件，你執行自己的代碼：

jQuery(document).ready(function($) {
 $(function () {
        $('#js-news').ticker({
            speed: 0.05,
            fadeInSpeed: 0,
            titleText: '',
            controls: false,
        });
    });
});

此代碼中有2個問題：

1）不必要的嵌套。 你在文件准備就緒時執行你的代碼然后再次調用文件就緒處理程序（$（function（）{...}）;

請記住，編寫$（document）.ready（function（）{}）或$（function（）{}）的目的完全相同。 因此，您可以刪除第二個事件偵聽器（無用）：

jQuery(document).ready(function($) {
    $('#js-news').ticker({
        speed: 0.05,
        fadeInSpeed: 0,
        titleText: '',
        controls: false,
    });
});

使用document.ready注冊，您的代碼將在完全構建DOM后運行。

2）我看到的另一個問題是你的選擇器#js-news無法解決！ 我看到頁面中沒有ID = js-news的元素......我錯過了什么嗎？

Answer 2

你可以把你的代碼放在上面等待dom完全加載。

$(function() {
    // Your code
});

如果還不夠，如果你想等待加載所有東西（圖片，css，......），你可以把你的代碼放在上面：

$(function()
{
    $(window).bind('load', function()
    {
        // Your code
    });
});