Tôi muốn thực thi một số javascript chỉ khi dom và css sẵn sàng, nhưng tôi không quan tâm đến hình ảnh (tôi có xu hướng lười biếng hình ảnh)Làm thế nào để javascript được thực hiện ngay khi dom và css sẵn sàng nhưng không phải hình ảnh
Tôi biết cách phát hiện trạng thái sẵn sàng cho dom, nhưng cách phát hiện css đã sẵn sàng chưa?
Bạn nên sử dụng sự kiện document.ready. window.onLoad kích hoạt khi tất cả hình ảnh và các hình ảnh khác được tải đầy đủ.
Không có cách nào để javascript để nói cho dù file .css của bạn được nạp trừ khi bạn tải file css của bạn sử dụng một cách rõ ràng javascript. Đây là cách tôi sẽ thực hiện việc sau:
function dynamicallyLoadCss(fileName,callBackFunc){
var fileRef=document.createElement("link");
fileRef.setAttribute("rel", "stylesheet");
fileRef.setAttribute("type", "text/css");
fileRef.setAttribute("href", filename);
if(callBackFunc) {
callBackFunc();
}
}
//Call the function like so...
dynamicallyLoadCss("mystyles.css", function() {
console.log("Our hamsters have finished loading your mystyles.css file.");
});
Bạn cần một cái gì đó như dưới đây. Hàm này thực hiện ngay khi DOM được tải nhưng không thực hiện toàn bộ trang. Có rất nhiều sự khác biệt giữa tải trang và tải DOM.
$(document).ready(
function(){
alert('DOM is now loaded and can be manipulated .');
}
);
Nó sẽ là sự kết hợp giữa việc sử dụng JS onload và tải tất cả CSS của bạn lên đầu tiên. Nếu bạn tải tất cả CSS của mình trước khi tải bất kỳ tập lệnh nào, bạn sẽ được đảm bảo có tất cả CSS được tải; kết hợp với JS khi tải, và bạn sẽ nhận được những gì bạn đang tìm kiếm.
Tải lên tất cả CSS trong Tiêu đề của trang và trước bất kỳ JavaScript nào.
Đây cũng là phương pháp hay nhất để đặt JavaScript ở cuối trang ngay trước thẻ để đảm bảo tất cả các phần tử được tải đầy đủ trước tiên.
$(document).ready(function(){
// now do your actions
});
Folks ở đây đang đăng nhiều ví dụ về việc sử dụng jQuery's DOM ready feature - nhưng họ đã không đề cập hoặc chứng minh rằng để sử dụng nó, bạn cần phải bao gồm jQuery.
Bạn có thể sử dụng JavaScript thẳng để hoàn thành những gì bạn muốn - nhưng kỹ thuật này khác nhau giữa các trình duyệt và jQuery luôn làm tốt công việc bình thường hóa những khác biệt này trên bảng cho bạn - cá nhân tôi là jQuery Đàn ông. Có lẽ sẽ luôn :)
Trong vòng cuối của tài liệu HTML của bạn của <head>, bao gồm thư viện jQuery, và sau đó mã của bạn :)
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(function(){
console.log("DOM is Ready! Images haven't finished loading yet!");
});
</script>
Sử dụng .ready() chức năng của jQuery đi kèm trong nhiều hình thức. Cá nhân, tôi thích phương pháp trên. Hai bên dưới, dường như là chính thức được cho phép.
$(document).ready(function(){ console.log("DOM Ready!"); });
$(function(){ console.log("DOM Ready!"); });
jQuery's Documentation on .ready() có này để nói:
Trong khi JavaScript cung cấp các sự kiện tải để thực hiện mã khi một trang được trả lại, sự kiện này không được kích hoạt cho đến khi toàn bộ tài sản như hình ảnh đã được nhận hoàn toàn. Trong hầu hết các trường hợp, tập lệnh có thể chạy ngay sau khi hệ thống phân cấp DOM được xây dựng hoàn chỉnh. Người xử lý chuyển đến.ready() được đảm bảo sẽ được thực hiện sau khi DOM sẵn sàng, vì vậy đây thường là nơi tốt nhất để đính kèm tất cả các trình xử lý sự kiện khác và chạy mã jQuery khác. Khi sử dụng tập lệnh dựa vào giá trị của thuộc tính kiểu CSS, điều quan trọng là phải tham chiếu biểu định kiểu bên ngoài hoặc nhúng phần tử kiểu trước khi tham chiếu tập lệnh.
Tôi đã đánh dấu trích dẫn đó từ tài liệu cho bạn, như bạn đã đề cập rằng bạn muốn CSS tải trước. Bởi vẻ ngoài của sự vật, bạn chỉ cần đảm bảo rằng các thẻ <link rel="stylesheet" href="style.css" /> của bạn được đặt trong phần <head>ở trên mã jQuery của bạn :)
Chúc mừng mã hóa! // Chase
Nếu bạn không thể sử dụng $ (document) .ready kỹ thuật, bạn có thể đặt mã kịch bản của bạn ngay trước thẻ cơ đóng cửa.
<body>
html code....
....
<script>
var executeAfterDOMReady;
....
</script>
</body>
Đối với CSS, bạn có thể gọi file CSS của bạn thông qua jQuery:
$("<link/>", { rel: "stylesheet", type: "text/css", href: "your.css"}).appendTo("head");
Hoặc thậm chí thực hiện cuộc gọi Ajax:
$.ajax({
url:"your.css",
dataType:"script",
success:function(data){
$("head").append("<style>" + data + "</style>");
}
});
Được sửa đổi dom sử dụng javascrpt để hiển thị hình ảnh của bạn sau khi bạn đã thực hiện xử lý javascript chuẩn của bạn một tùy chọn? –
@Kafuka: không, tôi nghĩ hình ảnh của tôi chỉ ở vị trí đó, đợi cho tải xuống. Không được sử dụng javascipt để sửa đổi – hh54188