Cufon được tải không đồng bộ không hiển thị trong IE

Tôi đang tạo một trang web sử dụng Cufon và đặc biệt nặng về mặt trang trọng lượng do một lượng lớn Javascript. Vì vậy, tôi đang cố gắng để tải trong kịch bản không đồng bộ với head.js (http://headjs.com/) như sau:Cufon được tải không đồng bộ không hiển thị trong IE

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

Vì vậy, Jquery sẽ được tải về đầu tiên, tiếp theo cufon lib file và cufon phông chữ được tải xuống theo thứ tự và sau đó cufon là cuối cùng được gọi để thay thế H1. Rõ ràng, đây là một ví dụ được cắt bớt với ít thay thế nhưng điều này vẫn không hoạt động khi chỉ cố gắng thay thế H1.

Vấn đề là CHỈ trong Internet Explorer (6/7/8), văn bản không được thay thế nhưng tôi có thể thấy rằng Cufon chắc chắn đã được gọi. Tôi có thể xác định điều này bởi vì thẻ có lớp "cufon-active cufon-ready" được thêm vào nó. Khi tôi kiểm tra đánh dấu bằng cách sử dụng thanh công cụ của IE Developer, các thẻ cufon/cufoncanvas có bên trong các phần tử được chọn nhưng, vì muốn có một từ tốt hơn, vô hình.

Trong IE9, tập lệnh hoạt động như dự định tương tự như Chrome và Firefox. Tôi đã thử điều chỉnh công cụ vẽ Cufon và đã cập nhật lên phiên bản 1.09i mới nhất để có biện pháp tốt. Nếu tôi di chuyển câu lệnh Cufon gọi đến sự kiện sẵn sàng tài liệu thay vì tải không đồng bộ, nó hoạt động nhưng tôi đang cố gắng tối ưu hóa tải trang và trang web của tôi sẽ sử dụng một số phông chữ Cufon cũng như nhiều trình cắm thêm JS khác. Tôi cũng đã thử sử dụng cả labs.js và head.js để tải các tệp thích hợp một cách không đồng bộ.

Nguồn

2011-02-08 giles

Điều đó thật đáng tiếc, bạn nên gửi lỗi. – Marko

Khắc phục được [sáp nhập] (https://github.com/sorccu/cufon/commit/79ea413a3aadc30d8cffb05faade6e003d9e7e5a) vào kho lưu trữ chính. –

tôi đã cùng một vấn đề - Tôi giải quyết điều này bằng cách sử dụng các phát hiện trình duyệt của head.js phải làm như sau:

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

Bạn cũng có thể sử dụng ý kiến có điều kiện (tôi đã làm không phải vì tôi cũng đang làm Phát hiện hỗ trợ GZIP trong JavaScript và cần điều chỉnh các tập lệnh được tải động.)

Đó là một hack, nhưng phải đủ hữu ích cho đến khi nó được giải quyết trong chính thư viện.

(Tôi cũng đã gửi GIST với một ví dụ hoàn chỉnh hơn here)

Nguồn

2011-04-13 01:43:45 CameraSchoolDropout

tôi đã bị thương. vì nó chỉ ảnh hưởng đến cufon bạn vẫn có thể sử dụng head.js cho jquery vv trong phần tức là, nhưng tải cufon một cách riêng biệt hoặc? – worenga

@mightyuhu chắc chắn - trong kịch bản của tôi tôi đang sử dụng bộ chọn JQuery với cufon, và sau đó fadeIn trên phần tử cha khi cufon đã thực hiện công việc của nó. mặc dù bất kỳ tập lệnh nào còn lại tôi đã tải bằng head.js (mặc dù tôi không phản ánh điều này trong ví dụ trên) – CameraSchoolDropout

thử gọi

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

ngay trước </body> thẻ đóng.

Nguồn

2011-02-08 09:20:31 Chin

Điều này có khả năng sẽ gọi Cufon trước khi nó có cơ hội được tải xuống bởi tập lệnh tải: SCRIPT5009: 'Cufon' không được xác định. Tôi cũng đã thử đặt dòng này ngay sau cuộc gọi Cufon.replace nhưng vẫn không có gì – giles

Điều này không hiệu quả. – giles

Hãy thử thêm Cufon.now() sau Cufon.replace cuộc gọi, như vậy:

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

Nguồn

2011-04-29 07:11:18 matthewgregory

Bạn có thể giải thích lý do tại sao điều này sẽ làm cho nó hoạt động không? – Hbcdev

tôi giải quyết này một cách tương tự như cách tiếp cận CameraSchoolDropout của, ngoại trừ thay vì sử dụng Document.write, tôi đang sử dụng thẻ có điều kiện của IE và YepNope.js.

This issue on github nói rằng họ gặp sự cố khi sử dụng document.createElement('script') và tôi chỉ cảm thấy tốt hơn khi sử dụng điều kiện của IE.

Bạn có thể thấy một trang ví dụ mà tôi tạo ra tại 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>

Nguồn

2011-05-11 00:54:08

Nhìn lại, tôi nghĩ rằng tôi muốn bỏ qua toàn bộ bài kiểm tra IE và chỉ sử dụng các thẻ bình thường

Còn bây giờ chỉ cần tải jQuery và Cufón sử dụng thường xuyên <script> thẻ và nạp các tập tin sau đó sử dụng một bộ nạp kịch bản.

Sử dụng document.write là cách tiếp cận không tốt vì nó sẽ chỉ hoạt động nếu tập lệnh được tải/thực thi trước DOMReady và sử dụng trình duyệt đánh hơi để làm điều đó không phải là cách tiếp cận tốt vì nó có thể cho kết quả sai.

Nhận xét có điều kiện không phải là giải pháp tốt vì bạn có thể cần cập nhật tập lệnh trong tương lai và bạn sẽ phải nhớ cập nhật tập lệnh ở 2 vị trí khác nhau không tốt để bảo trì.

Làm theo this issue on GitHub để biết thời điểm lỗi được khắc phục.

Nguồn

2011-05-20 17:03:43

Các vấn đề liên quan

Cufon được tải không đồng bộ không hiển thị trong IE

Trả lời

Các vấn đề liên quan