Geek Answers Handbook

Cufon loaded asynchronously doesn't display in IE

I am creating a site that uses Cufon and is especially heavy in terms of page weight due to the large amount of Javascript. Therefore, I am trying to load the script asynchronously with head.js ( http://headjs.com/ ) as follows:

head.js("http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js", function() { head.js("/js/libs/cufon-yui.js", function() { head.js("/js/shared/Stag_Bold_700.font.js" , function() { Cufon.replace('h1', { fontFamily: 'Stag Bold' }); }); }); });

So, jQuery is loaded first, the subsequent cufon lib file and cufon font are loaded sequentially, and then Cufon is finally called to replace H1. Obviously, this is a shorthand example with fewer replacements, but it still doesn't work when you are just trying to replace H1.

The problem is that ONLY in Internet Explorer (6/7/8) the text is not replaced, but I see that Cufon has definitely been called. I can verify this because the class "cufon-active cufon-ready" has been added to the tag. When I check the markup using the IE Developer toolbar, the cufon / cufoncanvas tags are inside the selected elements, but, if they don’t want a better word, they are invisible.

In IE9, the script behaves as intended, similarly to Chrome and Firefox. I tried to customize the Cufon drawing engine and updated to the latest version 1.09i for a good grade. If I move the Cufon operator to the caller in the document ready event instead of loading asynchronously, it works, but I'm trying to optimize the page loading, and my site will use a number of Cufon fonts, as well as many other JS plug-ins. I also tried using both labs.js and head.js to asynchronously load the corresponding files.

+7
source share
5 answers

I had the same problem - I accessed this using head.js browser detection to do the following:

 if (head.browser.mozilla || head.browser.webkit || head.browser.opera || (head.browser.ie && (head.browser.version == '9.0'))) { head.js('script/jquery.min.js', 'script/cufon.js', function () { head.js('script/bebas_neue_400.font.js', function () { Cufon.replace('h1', { textShadow: '1px 1px rgba(0, 0, 0, 0.2)' }).now(); // or a head.js('scripts/file.with.cufon.replacement.js'); }); }); } else { // here we load scripts depending on GZIP support for this browser document.write('\x3Cscript type="text/javascript" src="script/jquery.min.js">\x3C/script>'); document.write('\x3Cscript type="text/javascript" src="script/cufon.js">\x3C/script>'); document.write('\x3Cscript type="text/javascript" src="script/bebas_neue_400.font.js">\x3C/script>'); document.write('\x3Cscript type="text/javascript" src="script/file.with.cufon.replacement.js">\x3C/script>'); }

You can also use conditional comments (I did not do this because I also do JavaScript detection of GZIP support and must configure dynamic script loading.)

This is a hack, but it should be useful enough until it is addressed in the library itself.

(I also posted a GIST with a more complete example here )

+2
source

try to call

  <script type="text/javascript"> Cufon.now(); </script>

before the </body> closes.

+2
source

Try adding Cufon.now() after calling Cufon.replace , for example:

 Cufon.replace('h1', { fontFamily: 'Stag Bold' }); Cufon.now();
+1
source

I solved this the same way as the CameraSchoolDropout approach, except for using Document.write , I use IE and YepNope.js conditional tags.

This issue on github suggests that they had problems using document.createElement('script') and I just felt better using IE conditions.

You can see the example page that I created at http://epraxadev.com/yepnope/

 <head> <style type="text/css"> #txt { visibility:hidden; } </style> <!--[if lte IE 8]> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script> <script src="js/cufon-yui.js"></script> <script src="js/adventor.cufon.js"></script> <![endif]--> <script src="js/modernizr.custom.js"></script> <script> yepnope([{ test: window.jQuery, nope: { 'yJ': '//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js', 'yCufon': 'js/cufon-yui.js', 'yFont': 'js/museo.font.js' }, callback: { 'yJ': function(){ console.log("YepNope loaded jQuery! This isn't IE!"); } }, complete: function() { console.log('All browsers, including IE, will show this'); Cufon.replace('h1'); $(document).ready(function(){ $('#txt').css('visibility', 'visible'); }); } }]); </script> <noscript> <style type="text/css"> #txt { visibility:visible; } </style> </noscript> </head>
0
source

Now just load jQuery and Cufón using regular <script> tags and load subsequent files using the script loader.

Using document.write is a bad approach, as it will only work if the script is loaded / executed before DOMReady and used to bypass the browser, this is not a good approach, as it can give false results.

Conditional comments are not a good solution either because you may need to update the scripts in the future, and you have to remember to update it in two different places, which is bad for ease of maintenance.

Follow this issue on github to find out when the bug has been fixed.

0
source

More articles:


All Articles