2010-07-29 30 views
7

Tôi muốn biết cách hoạt động của $(document).ready() cùng với các tập lệnh nói chung. Giả sử tôi có tập lệnh ở cuối trang (vì lý do hiệu suất mà tôi được nói?). Ví dụ: giả sử bạn có liên kết và bạn cần phải ngăn chặn hành động mặc định của nó (preventDefault()). Nếu tập lệnh ở cuối trang, có phải người dùng có thể xem trang và nhấp vào liên kết trước khi trình duyệt biết không theo liên kết không?

+1

Có, điều này hoàn toàn có thể xảy ra. –

+2

Xem câu hỏi gần đây này. http://stackoverflow.com/questions/3220242/when-exactly-the-document-ready-callback-is-executed – user113716

Trả lời

2

Các tập lệnh trong phần 'đầu' được đánh giá tại thời điểm thẻ script được tải vào trình duyệt (ví dụ: trước phần thân). Các thẻ script ở phần cuối của tài liệu cũng được thực hiện khi chúng được trình duyệt gặp phải khi nó phân tích trang - vì vậy trước sự kiện 'tài liệu đã sẵn sàng'. Sự kiện 'tài liệu đã sẵn sàng' được kích hoạt khi toàn bộ trang được tải - tức là khi trình duyệt phân tích cú pháp thẻ đóng '</html>'.

Vì vậy, có, nếu phải mất một lúc để tải và thực thi tập lệnh vô hiệu hóa các liên kết ở cuối tài liệu, người dùng có thể nhấp vào liên kết trong thời gian đó.

Một tùy chọn là hoạt động ngược lại - tức là tải trang có liên kết bị tắt và bật javascript của bạn. Hoặc, sử dụng 'live' hoặc 'delegate' trong các tập lệnh ở trên cùng (sau khi jquery được tải) để các liên kết bị ảnh hưởng khi chúng được tạo ra.

Nhìn here đối với một số phức tạp liên quan đến cách trình duyệt xử lý các tập lệnh được tải động một cách hơi khác nhau.

0

Yahoo khuyến cáo đặt tất cả các kịch bản ở phần cuối của tài liệu của bạn cho hiệu suất - http://developer.yahoo.com/performance/rules.html

nhưng khi bạn có thể đọc trong các tài liệu, $(document).ready()

Chỉ định một chức năng để thực hiện khi DOM được nạp đầy đủ .

với điều đó đã nói, tôi không nghĩ bạn thực sự phải lo lắng về $(document).ready().

Tôi đoán $(document).ready() được đặt ở phía dưới sẽ chỉ thất bại nếu kết nối internet chậm quá. Tôi không thể nghĩ ra bất kỳ tình huống nào khác để thất bại.

2

Nếu kịch bản là ở dưới cùng của trang , không phải là nó có thể người dùng có thể thấy trang và nhấp vào liên kết trước khi trình duyệt hiểu biết để không đi theo liên kết?

Theo kinh nghiệm của tôi, có thể thực hiện được. Tôi đã xem xét điều này khi tạo kiểu cho một bảng có màu sắc/thậm chí tô màu từ document.ready() (hiển thị trên máy chủ là tốt hơn, tôi biết). Với kịch bản ở trên cùng màn hình hiển thị liền mạch. Với kịch bản ở phía dưới, đôi khi có sự chậm trễ đáng chú ý giữa việc tải trang HTML và hiển thị các hàng. Đây cũng là một cái bàn nhỏ.

Lý do bạn nên đặt tập lệnh ở dưới cùng là cách tải tập lệnh hoạt động trong HTML. Mỗi lần trình duyệt truy cập vào thẻ <script>, tải trang sẽ dừng cho đến khi tập lệnh đó được tải (hoặc được truy xuất từ ​​bộ nhớ cache). Nếu tập lệnh đó ở dưới cùng, trang đã được tải để người dùng có thể thấy nội dung nào đó. Nếu tập lệnh ở đầu người dùng sẽ thấy một trang trống cho đến khi tập lệnh tải.

Thông thường sự chậm trễ như vậy không liên quan nhưng đôi khi có. Ngoài ra, như trong ví dụ của tôi, nếu Javascript của bạn có hiệu ứng hình ảnh thì đó có thể là trải nghiệm người dùng tốt hơn để không hiển thị trang, sau đó thay đổi nó.

0

Có, điều này là có thể, nhưng không phổ biến trong thực tế. $(document).ready() liên kết với sự kiện dom: được tải sau khi được xây dựng, nhưng trước khi tất cả các tài nguyên được tìm nạp. Nếu bạn đang làm một cái gì đó mà phải mất một thời gian dài trong $ (tài liệu). Đã có, chắc chắn rằng người dùng sẽ có một cửa sổ, mặc dù hẹp để sử dụng các phần tử không liên kết.

. Thậm chí còn cháy trước khi css được tải, vì vậy nếu bạn có thể thấy trang của mình trước khi được tạo kiểu, đó là cửa sổ của bạn để sử dụng các sự kiện không được gắn kết. Vì lý do đó, bạn cần phải đặt bất kỳ mã nào cần thuộc tính css hoặc kích thước hình ảnh trong hàm $ (document) .load (...).

0

Bạn muốn đính kèm một 'trả về false' sự kiện onclick:

<a href="http://www.google.com" onclick="return false;">Google</a> 

Các khả năng sử dụng nazi sẽ cho bạn biết đó là xấu bởi vì mọi người không thể theo các liên kết nếu họ không có javascript.

tôi nói, bạn nên không sử dụng các thẻ 'A' nếu bạn không thực sự muốn gắn bó người dân ở bất cứ đâu :)

<span style="cursor:pointer;text-decoration:underline">Google</span> 

thể có cùng ảnh hưởng.

0

Tôi đồng ý rằng điều này là có thể, nhưng nếu trang web được xây dựng từ góc nhìn progressive enhancement thì đó không phải là vấn đề. Nếu người dùng đã tắt JavaScript (tại sao họ sẽ làm điều đó ??!?!?) Hoặc trình duyệt cũ hơn không hỗ trợ điều gì đó mà tập lệnh của bạn đang thực hiện thì liên kết đó là cách duy nhất họ phải truy cập nội dung.

Vì vậy, nếu người dùng nhấp vào liên kết trong nửa giây đó trước khi tập lệnh được tải thì họ vẫn có thể làm việc. Nếu họ đợi cho đến khi trang tải đầy đủ, thì các tập lệnh sẽ khởi động và nhấp vào liên kết sẽ hiển thị hộp thoại phương thức thay vì điều hướng đi. Dù bằng cách nào, người dùng cũng nhận được nội dung.

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