Cufon cargado de forma asíncrona no se procesa en IE

Question

Estoy creando un sitio que utiliza Cufon y es particularmente pesado en términos de peso de página debido a una gran cantidad de Javascript. Por lo tanto estoy tratando de cargar en la secuencia de comandos de forma asíncrona con head.js (http://headjs.com/) de esta manera:

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

Así jQuery es descargado en primer lugar, la fuente de archivo y Cufon lib posterior Cufon se descargan en secuencia y luego es Cufón finalmente llamado para reemplazar el H1. Obviamente, este es un ejemplo recortado con menos reemplazos, pero aún no funciona cuando se intenta reemplazar el H1.

El problema es que SOLAMENTE en Internet Explorer (6/7/8), el texto no se reemplaza pero puedo ver que definitivamente se ha llamado a Cufon. Puedo verificarlo porque la etiqueta tiene la clase "cufon-active cufon-ready". Cuando inspecciono el marcado utilizando la barra de herramientas de IE Developer, las etiquetas de cufon/cufoncanvas están allí dentro de los elementos seleccionados pero, a falta de una palabra mejor, son invisibles.

En IE9, la secuencia de comandos se comporta de la manera prevista para Chrome y Firefox. He intentado ajustar el motor de dibujo Cufon y he actualizado a la última versión 1.09i para una buena medida. Si muevo las instrucciones de llamada Cufon al evento listo para documentos en lugar de cargarlas de manera asíncrona, funciona, pero estoy tratando de optimizar la carga de la página y mi sitio usará una cantidad de fuentes Cufon y muchos otros complementos JS. También he intentado usar labs.js y head.js para cargar los archivos apropiados de forma asincrónica.

Answer 1

que tenían el mismo problema - me dirigí a esta mediante el uso de la detección del navegador de head.js para hacer lo siguiente:

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

También es posible usar comentarios condicionales (no lo hice porque yo también estoy haciendo Detección de soporte GZIP en JavaScript y necesario para ajustar los scripts que se cargan dinámicamente.

Es un truco, pero debería ser lo suficientemente útil hasta que se aborde dentro de la biblioteca.

(También he publicado GIST con un ejemplo más completo here)

Answer 2

intente llamar

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

justo antes </body> etiqueta de cierre.

Answer 3

Trate de añadir Cufon.now() después de la llamada Cufon.replace, así:

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

Answer 4

He resuelto esto de una manera similar al enfoque de CameraSchoolDropout, excepto que en lugar de usar Document.write, estoy usando etiquetas condicionales de IE, y YepNope.js.

This issue on github dice que tuvieron problemas al usar document.createElement('script'), y me sentí mejor al utilizar condicionales de IE.

se puede ver una página de ejemplo que he creado en 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> 

Última pregunta

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.

 Cuestiones relacionadas

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.