2012-08-26 32 views
6

Đây là tình hình:

$(document).ready(function(){ 
    // this will return different result 
    alert($('#foo').width()); 
    // than this !!! 
    setTimeout(function(){ 
    alert($('#foo').width()); 
    }, 1000); 
}); 

CSS (trong <head> mục):

<link href='http://fonts.googleapis.com/css?family=Headland+One' rel='stylesheet' type='text/css'> 
... and 
#foo { 
    font-family: 'Headland One', serif; 
} 

Khi tôi sử dụng phông chữ chuẩn (Arial ví dụ) mọi thứ đều tốt (.width() trả lại kết quả tương tự trong cả hai trường hợp)

Có cách giải quyết khác với setTimeout để nhận đượcthích hợp không Giá trịvà giữ phông chữ tùy chỉnh?

+0

Bạn có thể hiển thị 'foo' là gì (liên quan đến cách thức phần tử được xác định) và nếu có bất kỳ sự kiện nào được đính kèm với nó không? –

+0

Tìm thấy mục này: http://stackoverflow.com/questions/5539602/cant-get-right-width-or-outerwidth-of-label-element –

+0

@OfirBaruch thực sự anh ấy có cùng vấn đề với tôi – Peter

Trả lời

9

Vì nó tải phông chữ ở xa. Bạn nên sử dụng $(window).load() thay vì $(document).ready(): tùy chọn đầu tiên sẽ được kích hoạt khi tất cả phông chữ/biểu định kiểu/tập lệnh và hình ảnh xa đã được tải xuống, tệp thứ hai chỉ khi DOM sẵn sàng.

+1

'$ (cửa sổ) .load() 'đã làm công việc. Cảm ơn bạn – Peter

+1

Ồ, thật sao? Tôi đã tìm kiếm câu trả lời cho điều này trong khoảng một năm. Không thể tin rằng nó rất đơn giản. –

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