Порядок загрузки jQuery в Wordpress

Question

У меня есть jQuery-скрипт, который читает img height и добавляет тэг style в тэг head.

JQuery

var img = document.getElementById('logomini');  
height = img.clientHeight;

$(function (){
    $("<style type='text/css' id='style1'>#menu ul { line-height: "+ height +"px }</style>").appendTo("head");
});

Проблема: иногда скрипт работает нормально, а иногда нет. Когда я обновляю свой веб-сайт (Wordpress), высота строки составляет 80px или 0px. Я думаю, что это проблема с загрузкой скрипта. Когда скрипт загружается быстрее, чем img, он показывает 0px. Но это только мое предположение... Тег скрипта прямо перед </body> тег.

моя демо-страница

Есть идеи?

Answer 1

Если вы хотите быть уверены, что изображение полностью загружено, то используйте этот код:

/* In WordPress, $ may be used for other libraries, so use this safer "document ready" method */
jQuery(function($) {
    /* wait until everything in the window has loaded */
    $(window).load(function() {
        var img = document.getElementById('logomini');  
        height = img.clientHeight;
        // The above two lines could be simplified like so:  
        var height = $('#logomini').height();
        $("<style type='text/css' id='style1'>#menu ul { line-height: "+ height +"px }</style>").appendTo("head");
    });
});

Также посмотрите этот ответ: Задержка сценария jquery, пока все остальное не загрузится