JavaScript running before page fully loaded

Question

I can not figure out why JavaScript is running before the page is loaded. The specific thing I'm waiting on is some images so that I can get their height.

The JavaScript is loaded via hook_preprocess_page(): drupal_add_js(path_to_theme(). '/js/smooth-accordion.js');.

Thanks for any help!

(function ($) {

Drupal.behaviors.listen_to_open = function(item) {
    // item height
    var bodyHeight = item.find('.accordion-body-inner').height();
    var imgHeight = item.find('.multi-image-wrapper li:first img');
    var targetHeight = bodyHeight > imgHeight ? bodyHeight : imgHeight;
    console.log(imgHeight.height());
    item.find('.product-showcase-open').click(
        function(){
            item.find('.multi-image-wrapper').animate({
                height: targetHeight + "px",
            })
            event.preventDefault();
        }
    )
}

Drupal.behaviors.smoothAccordion = {
    attach: function (context, settings) {
                    alert('doh'); // alerts before any text or images appear on page
        var $items = $('.accordion-item-wrapper');
        $items.each(
            function() {
                Drupal.behaviors.listen_to_open($(this));
            }
        )
    }
}
}(jQuery));

Answer 1

Drupal attach behaviors get called from a jQuery ready() callback upon initial page load (it is a little more complicated than that, though). This means that the DOM is ready, but replaced elements may not be done loading. Images are considered replaced elements, so your have a loading bug.

I get around these by using something like imageloaded, or manually attaching via $(window).bind('load', ...);, which will run when the whole page is done loading (including images).