Check to see if element exists after DOM is ready

Question

I'm trying to detect whether an element is visible after the DOM is ready. This element is a third party widget that loads slower than the page does.

My console.log for 'dom ready' is firing - like it should, but my check to see if the element is visible is returning false, as the element loads after the dom is ready.

Is there a way to listen for elements after the dom has loaded?

<script>
    $(function(){
        console.log('dom ready');

        if($(element).is(':visible')){
            console.log('element is visible. do stuff.');
        }

    });
</script>

Are you able to callback when your widget completes loading? — Aditya, Apr 01 '14 at 18:28
See this: http://stackoverflow.com/questions/5182016/what-is-the-difference-between-window-load-and-document-ready Try using this event: window.onload — pj013, Apr 01 '14 at 18:28

score 1 · Accepted Answer · answered Apr 01 '14 at 18:29

you can get the id from the iframe, or from the document that is being loaded and do something like this..

$('#external').load(function(){
    //lets do something when is loaded
    if($(element).is(':visible')){
       console.log('element is visible. do stuff.');
    }
});

This will trigger once that script, iframe is done loading

Oleg · Answer 2 · 2014-04-01T18:57:42.873

Try to read a documentation, maybe third-party widget's API allows you to attach listener on create event. That would be an ideal solution.

If it is not possible try using setTimeout function:

$(function(){
    console.log('dom ready');
    setTimeout(function() {
        if($(element).is(':visible')){
            console.log('element is visible. do stuff.');
        }
    }, 10);
});

If 10 ms is not enough, you may increase this interval unless it works, although I don't recommend using this approach.

Check to see if element exists after DOM is ready

2 Answers2