1

我有一个 jQuery 脚本，它读取 img 高度并将样式标签添加到 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>标签之前。

我的演示页面

有任何想法吗？

4

1 回答 1

2

如果要确保首先完全加载图像，请使用以下代码：

/* 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 脚本，直到其他所有内容都已加载

于 2016-02-02T19:45:59.290 回答