jquery之jQuery 高度的 Font Face 问题之第二次迭代之前的值不正确_编程设计

如您所见，文本区域的高度完美返回。但这是因为文本区域不是字体模式。

在我的网站上，文本是由 font-face 生成的，但它会在 font-face 加载之前获取高度，因为一旦您将 div 悬停一次并运行第二次迭代，它就会返回正确的高度。

因此 jQuery 高度有效，但只有在网站完全加载字体后才有效。

有解决办法吗？

感谢您的指点。

简单标记

<div class="home-mod">     
    <div class="mod-center"><img ... /></div>     
    <div class="mod-info"> <!-- this is the slider, slides up when .mod-info is hovered -->                     
        <a class="mod-link" href="..." title="test">DYNAMIC FONT-FACE TEXT HERE</a> 
 
        <div class="mod-excerpt">                         
            DYNAMIC NORMAL TEXT HERE                             
        </div>             
    </div>                            
</div>

当前脚本 - 当文本不是字体时完全可以完美运行

$(function() { 
    // positioning the current div.mod-info inside current div.home-mod 
 
    $(".home-mod").each(function() {  
        // this finds the div.mod-link height, and assigns var to div.mod-info top position 
        var moduleLink = $(this).find(".mod-link").height(), 
        modulePlus = moduleLink+20; 
 
        $(this).find('.mod-info').css("top", "-" + modulePlus + "px"); 
    });         
 
    // animating current div.mod-info to new top position 
 
    $("div.mod-info").hover(function() { 
        // first iteration 
        // getting dynamic overall height of div.mod-info and animate to  
 
        var moduleInfo = $(this).height(); 
 
        // this then animates to new position  
        $(this).animate({ top: "-" + moduleInfo + "px" });         
    }, function() { 
        // second iteration 
        // returns back to original postion 
 
        var moduleLink = $(this).find(".mod-link").height(), 
        modulePlus = moduleLink+20; 
 
        $(this).animate({ top: "-" + modulePlus + "px" });         
    }); 
 
    // this justs finds the link and in .home-mod and make its clickable         
    $(".home-mod").click(function() {             
        window.location = $(this).find("a.mod-link").attr("href"); 
        return false;             
    });                     
});

更新 - 已解决

这对我有用，而不是准备好文档。加载时略有延迟，但比不正确的值要好。

$(window).load(function(){   
 
    // my script here... 
 
});

请您参考如下方法:

是的。

最简单的解决方法 - 以像素为单位设置文本的行高(您想要获取高度的位置)。如果字体中字母的宽度相似 - 就可以了。
创建 2 个隐藏的(不通过 display:none，使用 position:absolute + top:-5000px;)div文本 + 空白:nowrap。例如，第一个使用 monospace，第二个使用 your_font,monospace font-family。然后创建setInterval(50ms延迟是正常的)并比较它们的高度。当高度变得不同时 - 您的字体已加载，您需要 clearInterval。
最长的方法 - 使用 $(window).load