Chức năng thay đổi kích thước jQuery không hoạt động khi tải trang

Question

Làm cách nào để có chức năng này không chỉ chạy trên kích thước cửa sổ mà còn trên tải trang ban đầu?

$(window).resize(function() { 
... 
}); 

Answer 1

Bạn sẽ muốn sử dụng:

$(document).ready(function() { /* your code */ }); 

Để làm một cái gì đó xảy ra onload. Nếu bạn muốn một cái gì đó để làm việc onload và onresize, bạn nên làm:

onResize = function() { /* your code */ } 

$(document).ready(onResize); 

$(window).bind('resize', onResize); 

Answer 2

Hành vi này là do thiết kế.

Bạn nên đặt mã của mình vào một hàm được đặt tên, sau đó gọi hàm.

Ví dụ:

function onResize() { ... } 

$(onResize); 
$(window).resize(onresize); 

---

Ngoài ra, bạn có thể làm cho một plugin để tự động ràng buộc và thực hiện một handler:

$.fn.bindAndExec = function(eventNames, handler) { 
    this.bind(eventNames, handler).each(handler); 
}; 

$(window).bindAndExec('resize', function() { ... }); 

Lưu ý rằng nó sẽ không hoạt động chính xác nếu xử lý sử dụng đối tượng event và không bao gồm mọi quá tải của phương thức bind.

Answer 3

$(document).ready(onResize); 
$(window).bind('resize', onResize); 

đã không làm việc với tôi.

Hãy thử

$(window).load('resize', onResize); 
$(window).bind('resize', onResize); 

để thay thế.

(Tôi biết câu hỏi này là cũ, nhưng google gửi cho tôi ở đây, vì vậy ...)

Answer 4

cách tiếp cận khác, bạn có thể chỉ đơn giản là thiết lập một handler, và giả mạo một sự kiện thay đổi kích thước bản thân:

// Bind resize event handler through some form or fashion 
$(window).resize(function(){ 
    alert('Resized!'); 
}); 

// Trigger/spoof a 'resize' event manually 
$(window).trigger('resize'); 

Answer 5

tôi nghĩ rằng giải pháp tốt nhất chỉ là để ràng buộc nó vào tải và thay đổi kích thước kiện:

$(window).on('load resize', function() { 
    // your code 
});