jQuery loading order in Wordpress

Question

I have a jQuery script that reads img height and adds style tag to head tag.

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");
});

The problem: sometimes the script is working properly and sometimes it's not. When I'm refreshing my website (Wordpress) the line-height is 80px or 0px. I think it's a problem with script loading. When script is loading faster than img it showing 0px. But it's only my guess... The script tag is right before </body> tag.

my demo page

Any ideas?

You are setting the height variable before the image, you're getting the height from, is loaded. You should be defining the variables within the document ready function. — APAD1
– APAD1, Commented Feb 2, 2016 at 19:51

Community · Accepted Answer · 2017-05-23 10:28:24Z

2

If you want to be sure the image is fully loaded first, then use this code:

/* 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");
    });
});

Also see this answer: Delaying a jquery script until everything else has loaded

edited May 23, 2017 at 10:28

CommunityBot

11 silver badge

answered Feb 2, 2016 at 19:45

random_user_name

26.3k7 gold badges81 silver badges119 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user4011723 Over a year ago

Sorry :) well nothing changed. Still, sometimes is working properly, sometimes it's not.

Collectives™ on Stack Overflow

jQuery loading order in Wordpress

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related