Acciones de jQuery estrictamente después de la carga completa del DOM

Estoy usando jquerynewsticker to reveal 100,000 digits of the number π in a news ticker fashion. If i have my Chrome inspector open, i can see that the page loads from top to bottom, but the after the number, as well all the JS behind it, is rendered black for a few seconds, and only then becomes coloured as per default. However, the script already starts running as you can see on the test page here: http://marckremers.com/pi/ticker/ It seems to run, but without rendering. If i reduce the size of the number, it works. So it's clearly an issue where the loading isnt complete.

How can I force the script to only play once everything has 100% loaded?

preguntado el 09 de marzo de 12 a las 16:03

¿Has probado jquery(window).load() en lugar de jquery(document).ready()? -

I was just going to suggest what Jason did. $(document).load(...) es el mismo que <body onload=""> -

2 Respuestas

Looking at your website I see the you load the ticker plugin and you execute your own code:

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

There 2 issues in this code:

1) Unnecessary nesting. you execute your code on document ready and then you call again a document ready handler ($(function(){...});

Keep in mind that writing $(document).ready( function(){} ) or $(function(){}) serves exactly the same purpose. For this reason you can remove the second event listener (useless):

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

with document.ready registration your code will run after the DOM has been completely built.

2) Another issue I see is that your selector #js-news does not resolve! I see no element in the page with ID=js-news... am I missing something ?

respondido 09 mar '12, 16:03

I just removed the on document ready bit, still no luck. Yes the id is there, above all the numbers, it's the <ul>. Thanks - RGBK

I put it on jsfiddle so it's easy for everyone to have a look. here's the link to the editor jsfiddle.net/Wcn5v/1 and here you can see the jsfiddle example in action: jsfiddle.net/Wcn5v/1/show - David

true that does seem to work: jsfiddle.net/Wcn5v/2 with 100,000 chars :-) thanks! - RGBK

You can put your code as above to wait for the dom to be fully loaded.

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

If it's not enough, if you want to wait for everything to be loaded (images, css, ...), you can put your code as above :

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

respondido 09 mar '12, 16:03

Nope it does the exact same thing i'm afraid. - RGBK

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.